我正在尝试将一个非常基础的项目与React,TypeScript和Webpack整合在一起。编译时,我从以下位置的react文件夹中收到以下错误node_modules(为了简便起见,我删除了堆栈跟踪和项目路径):
react
node_modules
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固定好了。
babel-preset-2015
我已经尝试过的每一个组合target,并module在tsconfig.json得到的打字稿同样的结果,但无法得到任何工作。 如何使Webpack,TypeScript和React一起工作?
target
module
tsconfig.json
我之前使用过所有这三种技术,这是最近的兼容性问题吗?如果是这样,最新的兼容版本是什么?
我还看到了其他一些与此问题类似的问题,其中解决方案fbjs直接安装在项目中-我也尝试过此问题,但没有成功。
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。
.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" ] }