[英]Webpack + React + TypeScript: Module not found … in … node_modules/react/
我正在尝试将一个非常基本的项目与 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
- 我也尝试过但没有成功。
{
"compilerOptions": {
"target": "es5",
"jsx": "react",
"module": "es2015"
},
"exclude": ["build"]
}
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" },
],
},
};
{
...
"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"
}
}
import * as React from "react";
const a = <div />;
(我在安装了 Node 9.2.1 和 NPM 5.6.0 的情况下运行它)
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"
]
}
在 VSCode 中,选中 Deno Extension 并将其设置为 Enable(Workspace)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.