javascript 模块构建失败（来自 ./node_modules/babel-loader/lib/index.js）：错误：找不到模块“babel-preset-react”
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/52541561/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Module build failed (from ./node_modules/babel-loader/lib/index.js): Error: Cannot find module 'babel-preset-react'
提问by user3342735
I'm stuck with the following error when trying to build a react app with Webpack4 and Babel7.
尝试使用 Webpack4 和 Babel7 构建 React 应用程序时，我遇到了以下错误。
ERROR in ./src/index.js Module build failed (from ./node_modules/babel-loader/lib/index.js): Error: Cannot find module 'babel-preset-react' from '/Users/me/Desktop/reflask' - If you want to resolve "react", use "module:react" - Did you mean "@babel/react"? at Function.module.exports [as sync] (/Users/me/Desktop/reflask/node_modules/resolve/lib/sync.js:43:15) at resolveStandardizedName (/Users/me/Desktop/reflask/node_modules/@babel/core/lib/config/files/plugins.js:101:31) at resolvePreset (/Users/me/Desktop/reflask/node_modules/@babel/core/lib/config/files/plugins.js:58:10) at loadPreset (/Users/me/Desktop/reflask/node_modules/@babel/core/lib/config/files/plugins.js:77:20) at createDescriptor (/Users/me/Desktop/reflask/node_modules/@babel/core/lib/config/config-descriptors.js:154:9) at items.map (/Users/me/Desktop/reflask/node_modules/@babel/core/lib/config/config-descriptors.js:109:50) at Array.map () at createDescriptors (/Users/me/Desktop/reflask/node_modules/@babel/core/lib/config/config-descriptors.js:109:29) at createPresetDescriptors (/Users/me/Desktop/reflask/node_modules/@babel/core/lib/config/config-descriptors.js:101:10) at passPerPreset (/Users/me/Desktop/reflask/node_modules/@babel/core/lib/config/config-descriptors.js:58:96) @ multi (webpack)-dev-server/client?http://localhost:8080./src main[1]
./src/index.js 中的错误模块构建失败（来自 ./node_modules/babel-loader/lib/index.js）：错误：无法从“/Users/me/Desktop/”中找到模块“babel-preset-react” reflask' - 如果你想解决“react”，请使用“module:react”——你的意思是“@babel/react”吗？在 Function.module.exports [as sync] (/Users/me/Desktop/reflask/node_modules/resolve/lib/sync.js:43:15) 在 resolveStandardizedName (/Users/me/Desktop/reflask/node_modules/@babel /core/lib/config/files/plugins.js:101:31) 在 resolvePreset (/Users/me/Desktop/reflask/node_modules/@babel/core/lib/config/files/plugins.js:58:10)在 loadPreset (/Users/me/Desktop/reflask/node_modules/@babel/core/lib/config/files/plugins.js:77:20) 在 createDescriptor (/Users/me/Desktop/reflask/node_modules/@babel/核心/lib/config/config-descriptors.js:154:http://localhost:8080./src main[1]
I've tried removing the node_modules folder and reinstalling dependencies with the following.
我尝试删除 node_modules 文件夹并使用以下内容重新安装依赖项。
Terminal
终端
rm -rf node_modules/
npm install
Configuration
配置
package.json
包.json
{
"name": "reflask",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"start": "webpack-dev-server --open --mode development",
"build": "webpack"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"@babel/core": "^7.1.0",
"@babel/preset-env": "^7.1.0",
"@babel/preset-react": "^7.0.0",
"babel-loader": "^8.0.2",
"html-loader": "^0.5.5",
"html-webpack-plugin": "^3.2.0",
"prop-types": "^15.6.2",
"webpack": "^4.19.1",
"webpack-cli": "^3.1.1",
"webpack-dev-server": "^3.1.9"
},
"dependencies": {
"bootstrap": "^4.1.3",
"react": "^16.5.2",
"react-bootstrap": "^0.32.4",
"react-dom": "^16.5.2",
"react-router-dom": "^4.3.1"
}
}
webpack.config.js
webpack.config.js
const HtmlWebPackPlugin = require("html-webpack-plugin");
module.exports = {
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: "babel-loader",
options: {
presets: ['react']
}
}
},
{
test: /\.html$/,
use: [
{
loader: "html-loader"
}
]
}
]
},
plugins: [
new HtmlWebPackPlugin({
template: "./src/index.html",
filename: "./index.html"
})
]
};
index.js
索引.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './js/components/App.jsx';
import registerServiceWorker from './registerServiceWorker';
ReactDOM.render(<App />, document.getElementById('root'));
registerServiceWorker();
.babelrc
.babelrc
{
"presets": ["@babel/preset-env", "@babel/preset-react"]
}
回答by Matthi
in your webpack config did you already try @babel/preset-reactinstead of just react?
在您的 webpack 配置中，您是否已经尝试过@babel/preset-react而不是仅仅尝试过react？
Btw. you test for /\.js$/Better test for /\.jsx?$/(x? means x is optional), because you import a .jsx file in your index.js
顺便提一句。您测试了/\.js$/Better test for /\.jsx?$/(x? 表示 x 是可选的)，因为您在 index.js 中导入了一个 .jsx 文件
Not
不是
options: {
presets: ['react']
}
but
但
options: {
presets: ['@babel/preset-react']
}
回答by zebnat
place .babelrc file at root dir with this inside
将 .babelrc 文件放在根目录下，里面有这个
{
"presets": ["@babel/preset-env", "@babel/preset-react"]
}
and remove preset from babel-loader webpack cfg
并从 babel-loader webpack cfg 中删除预设
options: {
presets: ['react']
}
回答by Hamit YILDIRIM
I did it at the end with this settings, (becouse es2015 has been changed https://www.npmjs.com/package/babel-preset-es2015) now!
我最后用这个设置做了，（因为 es2015 已经改变了https://www.npmjs.com/package/babel-preset-es2015）现在！
And presets in package.jsonor .babelrcor babel.config::
以及package.json或.babelrc或babel.config 中的预设::
use: { loader: 'babel-loader', options: { presets: ['@babel/react', '@babel/preset-env'], plugins: ['@babel/plugin-proposal-class-properties'] } }
use: { loader: 'babel-loader', options: { presets: ['@babel/react', '@babel/preset-env'], plugins: ['@babel/plugin-proposal-class-properties'] } }
and..
和..
"devDependencies": { "@babel/cli": "^7.1.5", "@babel/core": "^7.1.6", "@babel/plugin-proposal-class-properties": "^7.1.0", "@babel/plugin-transform-react-constant-elements": "^7.0.0", "@babel/plugin-transform-react-inline-elements": "^7.0.0", "@babel/preset-env": "^7.1.6", "@babel/preset-react": "^7.0.0", "@babel/register": "^7.0.0", "@babel/runtime": "^7.1.5", "babel-eslint": "^8.2.6", "babel-loader": "^8.0.4", "babel-node": "^6.5.3", "babel-plugin-react-transform": "^3.0.0", "babel-plugin-transform-class-properties": "^6.24.1", "babel-plugin-transform-react-pure-class-to-function": "^1.0.1", "babel-plugin-transform-react-remove-prop-types": "^0.4.20", "babel-polyfill": "^6.26.0", "babel-preset-env": "^1.7.0", "babel-preset-es2015": "^6.24.1", "babel-preset-react": "^6.24.1", "webpack": "^4.26.1" }
"devDependencies": { "@babel/cli": "^7.1.5", "@babel/core": "^7.1.6", "@babel/plugin-proposal-class-properties": "^7.1.0", "@babel/plugin-transform-react-constant-elements": "^7.0.0", "@babel/plugin-transform-react-inline-elements": "^7.0.0", "@babel/preset-env": "^7.1.6", "@babel/preset-react": "^7.0.0", "@babel/register": "^7.0.0", "@babel/runtime": "^7.1.5", "babel-eslint": "^8.2.6", "babel-loader": "^8.0.4", "babel-node": "^6.5.3", "babel-plugin-react-transform": "^3.0.0", "babel-plugin-transform-class-properties": "^6.24.1", "babel-plugin-transform-react-pure-class-to-function": "^1.0.1", "babel-plugin-transform-react-remove-prop-types": "^0.4.20", "babel-polyfill": "^6.26.0", "babel-preset-env": "^1.7.0", "babel-preset-es2015": "^6.24.1", "babel-preset-react": "^6.24.1", "webpack": "^4.26.1" }
and the code that you call to preset example:
以及您调用预设示例的代码：
"theme:build": "babel theme/src -d theme/dist --presets @babel/react --plugins transform-class-properties --quiet && npm run webpack:store",
presets @babel/react
预设@babel/react
in github very much forum about the subject!
在 github 上有很多关于这个主题的论坛！
