别名 react as preact throws Cannot find module: 'react/jsx-runtime'

Question

不要使用我链接的指南，它是旧的 - 改用答案中的指南

我正在尝试通过 following their guide 从 react 切换到 preact。我将 webpack.config.js 别名更改为添加：

  alias: {
    "react": "preact-compat",
    "react-dom": "preact-compat",
    .....

但是，当我运行 npm run build 时，我不断收到：

Failed to compile.

.\src\index.tsx
Cannot find module: 'react/jsx-runtime'. Make sure this package is installed.

我试过了：

• 按照此处的建议更改 tsconfig：create-react-app typescript won't run npm start。似乎没有帮助。我最终将其保留为原件："jsx": "react-jsx"

• 确认我的依赖项是最新的：

  "@types/node": "^14.14.35",

  "@types/react": "^17.0.3",

  "@types/react-dom": "^17.0.3",

  “打字稿”：“^4.2.3”，

• 删除并重新安装 node_modules

• 将 index.js 转换为 index.tsx

• 像这个 github 建议的那样将 preact 导出添加到 package.json：https://github.com/babel/babel/issues/12210#issuecomment-712043796

当我在 preact 指南中注释掉别名更改时，一切正常。很高兴包含更多信息，但是我不确定什么是相关的。

这是来自 npm run build 的详细错误日志：

13 verbose stack Error: website@0.2.5 build: `node scripts/build.js`
13 verbose stack Exit status 1
13 verbose stack     at EventEmitter.<anonymous> (C:\Program Files\nodejs\node_modules\npm\node_modules\npm-lifecycle\index.js:332:16)
13 verbose stack     at EventEmitter.emit (events.js:315:20)
13 verbose stack     at ChildProcess.<anonymous> (C:\Program Files\nodejs\node_modules\npm\node_modules\npm-lifecycle\lib\spawn.js:55:14)
13 verbose stack     at ChildProcess.emit (events.js:315:20)
13 verbose stack     at maybeClose (internal/child_process.js:1048:16)
13 verbose stack     at Process.ChildProcess._handle.onexit (internal/child_process.js:288:5)

Answer 1

看起来您指的是一个过时的文档页面。这是latest one。

您应该改用preact/compat：

alias: {
  "react": "preact/compat",
  "react-dom": "preact/compat",
  ...