Webpack + React + TypeScript:模块未找到......在...... node_modules/react/ [英] Webpack + React + TypeScript: Module not found ... in ... node_modules/react/
问题描述
我正在尝试将一个非常基础的项目与 React、TypeScript 和 Webpack 组合在一起.当我编译时，我从 node_modules 中的 react 文件夹中得到以下错误(为简洁起见，我删除了堆栈跟踪和我的项目路径):
./node_modules/react/cjs/react.production.min.js 中的错误找不到模块:错误:无法解析.../node_modules/react/cjs"中的fbjs/lib/emptyFunction"./node_modules/react/cjs/react.development.js 中的错误找不到模块:错误:无法解析.../node_modules/react/cjs"中的fbjs/lib/emptyFunction"./node_modules/react/cjs/react.production.min.js 中的错误找不到模块:错误:无法解析.../node_modules/react/cjs"中的fbjs/lib/emptyObject"./node_modules/react/cjs/react.development.js 中的错误找不到模块:错误:无法解析.../node_modules/react/cjs"中的fbjs/lib/emptyObject"./node_modules/react/cjs/react.development.js 中的错误找不到模块:错误:无法解析.../node_modules/react/cjs"中的fbjs/lib/invariant"./node_modules/react/cjs/react.development.js 中的错误找不到模块:错误:无法解析.../node_modules/react/cjs"中的fbjs/lib/warning"./node_modules/react/cjs/react.production.min.js 中的错误找不到模块:错误:无法解析.../node_modules/react/cjs"中的object-assign"./node_modules/react/cjs/react.development.js 中的错误找不到模块:错误:无法解析.../node_modules/react/cjs"中的object-assign"./node_modules/react/cjs/react.development.js 中的错误找不到模块:错误:无法解析.../node_modules/react/cjs"中的prop-types/checkPropTypes"我尝试卸载 TypeScript 并将其替换为 Babel 以转译 JSX，但遇到了同样的错误.安装 babel-preset-2015 修复它.
我已经尝试了 tsconfig.json 中 target 和 module 的几乎所有组合，以在 TypeScript 中获得相同的结果，但无法'没有任何工作.如何让 Webpack、TypeScript 和 React 协同工作?
我以前使用过所有这三种技术，这是最近的兼容性问题吗?如果是，最新的兼容版本是什么?
我看到了一些与此类似的其他问题，其中解决方案是直接在项目中安装 fbjs - 我也尝试过，但没有成功.
文件
tsconfig.json
<代码>{编译器选项":{"目标": "es5","jsx": "反应",模块":es2015"},排除":[构建"]}webpack.config.js
module.exports = {入口: {dev: "./src/index.tsx",},输出: {文件名:./build/index.js"，},开发工具:源地图"，解决: {扩展名:[".ts", ".tsx"],},模块: {装载机: [//打字稿{ test:/\.tsx?$/, loader: "ts-loader" },],},};package.json
<代码>{...脚本":{构建":webpack"},开发依赖":{"@types/react": "^16.0.28","ts-loader": "^3.2.0","打字稿": "^2.6.2","webpack": "^3.10.0"},依赖关系":{反应":^ 16.2.0"}}./src/index.tsx
import * as React from "react";const a = ;(我在安装了 Node 9.2.1 和 NPM 5.6.0 的情况下运行它)
Webpack 不解析 .js 文件.将此添加到您的 webpack.config.js.
解析:{扩展名:[.ts"、.tsx"、.js"、.jsx"]},这是我用来运行您的示例的 tsconfig.json.
<代码>{编译器选项":{"jsx": "反应","lib": ["es6", "dom"],"rootDir": "src","module": "commonjs","目标": "es5","sourceMap": 真,"moduleResolution": "节点","noImplicitReturns": 真,"noImplicitThis": 真,"noImplicitAny": 真,"strictNullChecks": 真},包括": [./src"],排除": [节点模块"，建造"]}I'm trying to put together a very basic project with React, TypeScript and Webpack. When I compile I get the following errors from the react folder in node_modules (I've removed the stack traces and my project's path for brevity):
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'
I tried uninstalling TypeScript and replacing it with Babel to transpile the JSX and got the same error. Installing babel-preset-2015 fixed it.
I've tried just about every combination of target and module in tsconfig.json to get the same result in TypeScript but couldn't get anything working. How can I get Webpack, TypeScript, and React working together?
I've worked with all three of these technologies before, is it a recent compatibility problem? If so what are the most recent compatible versions?
I've seen a few other questions similar to this one where the solution was installing fbjs directly in the project - I've tried this too without success.
Files
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 />;
(I'm running this with Node 9.2.1 and NPM 5.6.0 installed)
Webpack is not resolving .js files. Add this to your webpack.config.js.
resolve: {
extensions: [".ts", ".tsx", ".js", ".jsx"]
},
Here is the tsconfig.json I used to run your example.
{
"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"
]
}
这篇关于Webpack + React + TypeScript:模块未找到......在...... node_modules/react/的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
