[英]Upgrading webpack4 webpack-merge react issue
I've been trying to get a React project updated to webpack4 but no matter the configuration or advise/solution I try it still errors. 我一直在尝试将React项目更新为webpack4,但是无论是配置还是建议/解决方案,我都尝试仍然出错。
I currently have the following setup: 我目前有以下设置:
package.json 的package.json
{
"name": "PROJECTNAME",
"version": "1.0.13",
"description": "DESC",
"main": "index.js",
"engines": {
"node": "8.2.1"
},
"scripts": {
"build": "webpack --config webpack.prod.js --progress",
"dev": "webpack-dev-server --config webpack.dev.js --open --hot --watch"
},
"keywords": [],
"author": "AUTHOR",
"license": "MIT",
"resolve": {
"extensions": [
".js",
".scss"
]
},
"dependencies": {
"@fortawesome/fontawesome": "^1.1.8",
"@fortawesome/fontawesome-svg-core": "^1.2.2",
"@fortawesome/free-regular-svg-icons": "^5.2.0",
"@fortawesome/free-solid-svg-icons": "^5.2.0",
"@fortawesome/react-fontawesome": "^0.1.0",
"ajv": "^6.5.2",
"ajv-keywords": "^3.2.0",
"axios": "^0.18.0",
"fusioncharts": "^3.12.2",
"node-sass": "^4.6.1",
"prop-types": "^15.6.0",
"react": "^16.4.1",
"react-dom": "^16.4.1",
"react-fusioncharts": "^1.0.5",
"react-resize-detector": "^1.1.0",
"react-router-dom": "^4.2.2",
"react-select": "^1.1.0",
"recharts": "^1.2.0"
},
"devDependencies": {
"@babel/core": "^7.1.2",
"@babel/plugin-proposal-function-bind": "^7.0.0",
"@babel/preset-env": "^7.1.0",
"@babel/preset-react": "^7.0.0",
"@babel/preset-stage-0": "^7.0.0",
"babel-loader": "^8.0.4",
"babel-plugin-transform-class-properties": "^6.24.1",
"classnames": "^2.2.6",
"clean-webpack-plugin": "^0.1.19",
"copy-webpack-plugin": "^4.5.2",
"css-loader": "^1.0.0",
"file-loader": "^2.0.0",
"html-loader": "^0.5.5",
"html-webpack-plugin": "^3.0.6",
"react-hot-loader": "^4.3.11",
"sass-loader": "^7.1.0",
"style-loader": "^0.23.0",
"uglifyjs-webpack-plugin": "^2.0.1",
"webpack": "^4.20.2",
"webpack-cli": "^3.1.1",
"webpack-dev-server": "^3.1.0",
"webpack-merge": "^4.1.4"
}
}
.babelrc .babelrc
{
"presets": [
"@babel/preset-env",
"@babel/preset-react",
"@babel/plugin-proposal-function-bind"
],
"plugins": [
"babel-plugin-transform-class-properties"
]
}
webpack.commonn.js webpack.commonn.js
const path = require('path');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: {
app: './src/index.js'
},
output: {
path: path.join(__dirname,'/public'),
filename: 'bundle.js'
},
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
options: {
presets: ['env','react','es2015'],
plugins: ['transform-class-properties']
}
}
},
{
test: /\.css$/,
use: ["style-loader","css-loader"]
}
]
},
plugins: [
new CleanWebpackPlugin(['public']),
new HtmlWebpackPlugin({
template: './src/index.html'
})
]
};
webpack.dev.js webpack.dev.js
const webpack = require('webpack');
const merge = require('webpack-merge');
const common = require('./webpack.common');
module.exports = merge(common, {
mode: 'development',
devtool: 'inline-source-map',
devServer: {
contentBase: './public'
}
});
webpack.prod.js webpack.prod.js
const merge = require('webpack-merge');
const common = require('./webpack.common');
const UglifyJSPlugin = require('uglifyjs-webpack-plugin');
module.exports = merge(common, {
mode: 'production',
optimization: {
minimizer: [
new UglifyJSPlugin({
sourceMap: true,
uglifyOptions: {
compress: {
inline: false
},
mangle: {
keep_fnames: true
}
}
})
]
},
devtool: 'source-map'
});
index.js index.js
"use strict";
import React from 'react';
import ReactDOM from 'react-dom';
import './styles/app.scss';
import App from './components/App';
if (process.env.NODE_ENV !== 'production') {
console.log('USING DEV configuration')
}
const app = (
<App/>
);
ReactDOM.render(app, document.getElementById('app'));
The current ERROR is: 当前的错误是:
ERROR in ./src/index.js Module build failed (from ./node_modules/babel-loader/lib/index.js): Error: Cannot find module 'babel-preset-env' from 'user/mywork/dev' - Did you mean "@babel/env"?
./src/index.js中的错误模块构建失败(来自./node_modules/babel-loader/lib/index.js):错误:从'user / mywork / dev'中找不到模块'babel-preset-env'-您是说“ @ babel / env”吗?
I was previously using stage-2 or stage-0 for enabling arrow functions etc but that seemed to be conflicting with preset-env so have removed that for now and expanded the .babelrc presets as recommended but still can't seem to get the whole thing working. 我以前使用的是stage-2或stage-0来启用箭头功能等,但似乎与预设环境冲突,因此暂时将其删除并按建议扩展.babelrc预设,但似乎还是无法获得全部工作正常。
Any advise most welcome, thanks. 任何建议最欢迎,谢谢。
You are specifying babel options in two places, first in .babelrc, then in webpack.commonn.js. 您要在两个位置指定babel选项,首先在.babelrc中,然后在webpack.commonn.js中。 The options in webpack.commonn.js takes precedence, but that setting is wrong:
webpack.commonn.js中的选项优先,但是该设置是错误的:
presets: ['env','react','es2015']
With the above you are telling babel to look for 'babel-preset-env', 'babel-preset-react', etc..., which you did not install. 通过以上操作,您告诉babel寻找未安装的“ babel-preset-env”,“ babel-preset-react”等。
Thus you got the error: 因此,您得到了错误:
Cannot find module 'babel-preset-env' from 'user/mywork/dev' - Did you mean "@babel/env"?
Since you installed: 由于您已安装:
@babel/preset-env, and @babel/preset-react, etc.
you should have specified: 您应该指定:
presets: ['@babel/env','@babel/preset-react', .... ],
But you should have specify babel's options in one place, either in webpack's configuration or in .babelrc -- not in two place. 但是您应该在一个位置指定babel的选项,无论是在webpack的配置中还是在.babelrc中-而不是两个位置。
Another error I notice is: babel-plugin-transform-class-properties, which is not compatible with bable@7. 我注意到的另一个错误是:babel-plugin-transform-class-properties,它与bable @ 7不兼容。 You should install @babel/plugin-proposal-class-properties.
您应该安装@ babel / plugin-proposal-class-properties。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.