我正在尝试使用React、TypeScript和Webpack创建一个非常基础的项目。在编译时,我从“node_modules”文件夹中的“react”文件夹得到以下错误提示(为了简洁起见,我已删除了堆栈跟踪和我的项目路径):
(我使用已安装Node 9.2.1和NPM 5.6.0来运行此程序)
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来运行此程序)
tsconfig
也可以工作,仍然感谢您提供完整的设置! - Sandy Gifford