Webpack + React + TypeScript：未找到模块 ... in ... node_modules/react/

Posted 2023-03-13

【中文标题】Webpack + React + TypeScript：未找到模块 ... in ... node_modules/react/

【英文标题】：Webpack + React + TypeScript: Module not found ... in ... node_modules/react/

【发布时间】：2018-05-23 03:33:34

【问题描述】：

我正在尝试用 React、TypeScript 和 Webpack 组合一个非常基本的项目。当我编译时，我从node_modules 中的react 文件夹中收到以下错误（为简洁起见，我删除了堆栈跟踪和我的项目路径）：

ERROR in ./node_modules/react/cjs/react.production.min.js
Module not found: Error: Can't resolve 'fbjs/lib/emptyFunction' in '.../node_modules/react/cjs'

ERROR in ./node_modules/react/cjs/react.development.js
Module not found: Error: Can't resolve 'fbjs/lib/emptyFunction' in '.../node_modules/react/cjs'

ERROR in ./node_modules/react/cjs/react.production.min.js
Module not found: Error: Can't resolve 'fbjs/lib/emptyObject' in '.../node_modules/react/cjs'

ERROR in ./node_modules/react/cjs/react.development.js
Module not found: Error: Can't resolve 'fbjs/lib/emptyObject' in '.../node_modules/react/cjs'

ERROR in ./node_modules/react/cjs/react.development.js
Module not found: Error: Can't resolve 'fbjs/lib/invariant' in '.../node_modules/react/cjs'

ERROR in ./node_modules/react/cjs/react.development.js
Module not found: Error: Can't resolve 'fbjs/lib/warning' in '.../node_modules/react/cjs'

ERROR in ./node_modules/react/cjs/react.production.min.js
Module not found: Error: Can't resolve 'object-assign' in '.../node_modules/react/cjs'

ERROR in ./node_modules/react/cjs/react.development.js
Module not found: Error: Can't resolve 'object-assign' in '.../node_modules/react/cjs'

ERROR in ./node_modules/react/cjs/react.development.js
Module not found: Error: Can't resolve 'prop-types/checkPropTypes' in '.../node_modules/react/cjs'

我尝试卸载 TypeScript 并用 Babel 替换它来转译 JSX 并得到同样的错误。 安装babel-preset-2015 修复了它。

我已经尝试了 tsconfig.json 中 target 和 module 的几乎所有组合，以在 TypeScript 中获得相同的结果，但无法正常工作。 如何让 Webpack、TypeScript 和 React 协同工作？

我之前使用过所有这三种技术，这是最近的兼容性问题吗？如果有，最新的兼容版本是什么？

我已经看到了一些与此类似的其他问题，其中解决方案是直接在项目中安装 fbjs - 我也尝试过，但没有成功。

文件

tsconfig.json

  "compilerOptions": 
    "target": "es5",
    "jsx": "react",
    "module": "es2015"
  ,
  "exclude": ["build"]

webpack.config.js

module.exports = 
    entry: 
        dev: "./src/index.tsx",
    ,
    output: 
        filename: "./build/index.js",
    ,
    devtool: "source-map",
    resolve: 
        extensions: [".ts", ".tsx"],
    ,
    module: 
        loaders: [
            // Typescript
             test: /\.tsx?$/, loader: "ts-loader" ,
        ],
    ,
;

package.json

    ...
    "scripts": 
        "build": "webpack"
    ,
    "devDependencies": 
        "@types/react": "^16.0.28",
        "ts-loader": "^3.2.0",
        "typescript": "^2.6.2",
        "webpack": "^3.10.0"
    ,
    "dependencies": 
        "react": "^16.2.0"
    

./src/index.tsx

import * as React from "react";

const a = <div />;

（我在安装 Node 9.2.1 和 NPM 5.6.0 的情况下运行它）

【参考方案1】：

Webpack 没有解析 .js 文件。将此添加到您的webpack.config.js。

resolve: 
    extensions: [".ts", ".tsx", ".js", ".jsx"]
,

这是我用来运行您的示例的tsconfig.json。

  "compilerOptions": 
    "jsx": "react",
    "lib": ["es6", "dom"],
    "rootDir": "src",
    "module": "commonjs",
    "target": "es5",
    "sourceMap": true,
    "moduleResolution": "node",
    "noImplicitReturns": true,
    "noImplicitThis": true,
    "noImplicitAny": true,
    "strictNullChecks": true
  ,
  "include": [
    "./src"
  ],
  "exclude": [
    "node_modules",
    "build"
  ]

【讨论】：

做到了！对于遇到同样问题的任何人，最小的tsconfig 也可以，仍然感谢您提供完整的设置！

【参考方案2】：

在 VSCode 中，勾选 Deno Extension 并将其设置为 Enable(Workspace)

【讨论】：

这应该是一条评论。