我正在运行一个简单的React / Django应用程序，使用webpack构建时出现以下错误：
ERROR in ./src/index.js
Module build failed (from ./node_modules/eslint-loader/dist/cjs.js):
TypeError: Cannot read properties of undefined (reading 'getFormatter')
at getFormatter (**[Relative path]**/frontend/node_modules/eslint-loader/dist/getOptions.js:52:20)
at getOptions (**[Relative path]**/frontend/node_modules/eslint-loader/dist/getOptions.js:30:23)
at Object.loader (**[Relative path]**/frontend/node_modules/eslint-loader/dist/index.js:17:43)
这是我的 package.json 文件：
{
"name": "frontend",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"start:dev": "webpack serve --config webpack.config.dev.js --port 3000",
"clean:build": "rimraf ../static && mkdir ../static",
"prebuild": "run-p clean:build",
"build": "webpack --config webpack.config.prod.js",
"postbuild": "rimraf ../static/index.html"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"axios": "^0.24.0",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-redux": "^7.2.6",
"redux": "^4.1.2",
"redux-thunk": "^2.4.0",
"reselect": "^4.1.1"
},
"devDependencies": {
"@babel/core": "^7.16.0",
"@babel/node": "^7.16.0",
"@babel/preset-env": "^7.16.0",
"@babel/preset-react": "^7.16.0",
"babel-eslint": "^10.1.0",
"babel-loader": "^8.2.3",
"babel-polyfill": "^6.26.0",
"css-loader": "^6.5.0",
"cssnano": "^5.0.9",
"eslint": "^8.1.0",
"eslint-loader": "^4.0.2",
"eslint-plugin-import": "^2.25.2",
"eslint-plugin-react": "^7.26.1",
"eslint-plugin-react-hooks": "^4.2.0",
"html-webpack-plugin": "^5.5.0",
"mini-css-extract-plugin": "^2.4.3",
"npm-run-all": "^4.1.5",
"postcss-loader": "^6.2.0",
"redux-immutable-state-invariant": "^2.1.0",
"rimraf": "^3.0.2",
"style-loader": "^3.3.1",
"webpack": "^5.61.0",
"webpack-cli": "^4.9.1",
"webpack-dev-server": "^4.4.0"
}
}
我的webpack.config.dev.js文件
const webpack = require('webpack');
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
process.env.NODE_ENV = 'development';
module.exports = {
mode: 'development',
target: 'web',
devtool: 'cheap-module-source-map',
entry: ['babel-polyfill', './src/index'],
output: {
path: path.resolve(__dirname),
publicPath: '/',
filename: 'bundle.js'
},
devServer: {
// stats: 'minimal',
client: {
overlay: true
},
historyApiFallback: true,
// disableHostCheck: true,
headers: { 'Access-Control-Allow-Origin': '*' },
https: false
},
plugins: [
new webpack.DefinePlugin({
'process.env.API_URL': JSON.stringify('http://localhost:8000/api/')
}),
new HtmlWebpackPlugin({
template: './src/index.html',
favicon: './src/favicon.ico'
})
],
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: [
{
loader: 'babel-loader'
},
'eslint-loader'
]
},
{
test: /(\.css)$/,
use: ['style-loader', 'css-loader']
}
]
}
};
我不确定是否需要更改配置文件，还是安装的软件包存在问题。若webpack的内部运行方式不太熟悉，请给予指导。
版本信息：
- node: v17.0.1
- npm: 8.1.2
- python: 3.9.6（相信这是一个js/webpack问题）
- Django: 3.2.8（^^^）