Webpack + React + TypeScript: 在... node_modules/react/中找不到模块...

Question

我正在尝试使用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来运行此程序）

- Sandy Gifford

Answer 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"
  ]
}

- arpl

---

搞定了！对于任何遇到相同问题的人，最小化的 tsconfig 也可以工作，仍然感谢您提供完整的设置！ - Sandy Gifford

Answer 2

在 VSCode 中，检查 Deno 扩展并将其设置为启用（工作区）。

- 闹闹前端