尝试使用Webpack4和Babel7构建React应用时,我遇到以下错误。
./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 [作为同步](/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)在loadDeset(/Users/me/Desktop/reflask/node_modules/@babel/core/lib/config/files/plugins.js:77:20)在createDescriptor(/ Users / me / Desktop / reflask / node_modules / @ babel /核心/库/配置/配置描述符.js:154:http:// localhost:8080 ./src main [1]
我试着删除node_modules文件夹,并使用以下方法重新安装依赖项。
终奌站
rm -rf node_modules/ npm install
组态
package.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
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
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
{ "presets": ["@babel/preset-env", "@babel/preset-react"] }
在您的webpack配置中,您是否已经尝试过@babel/preset-react而不仅仅是react?
@babel/preset-react
react
顺便说一句。您进行了/\.js$/ 更好的测试/\.jsx?$/(x?表示x是可选的),因为您在index.js中导入了.jsx文件
/\.js$/
/\.jsx?$/
不
options: { presets: ['react'] }
但
options: { presets: ['@babel/preset-react'] }