问题描述
我正在尝试创建一个React应用,而无需通过以下网站使用create-react-app:
./ src / index.js中的警告 模块警告(来自./node_modules/eslint-loader/dist/cjs.js): 无法加载配置“反应”以从其扩展。
我尝试安装所有依赖项,并花了几个小时来搜索答案,但似乎无法找出问题所在。
这是我的package.json:
{
"name": "xxx","version": "1.0.0","description": "","main": "index.js","scripts": {
"test": "echo \"Error: no test specified\" && exit 1","start": "webpack-dev-server --mode development","format": "prettier --write \"src/**/*.js\"","eslint-fix": "eslint --fix \"src/**/*.js\"","build": "webpack --mode production"
},"keywords": [],"author": "","license": "ISC","dependencies": {
"@babel/plugin-proposal-class-properties": "^7.10.4","react": "^16.13.1","react-bootstrap": "^1.3.0","react-dom": "^16.13.1"
},"devDependencies": {
"@babel/core": "^7.11.6","@babel/preset-env": "^7.11.5","@babel/preset-react": "^7.10.4","babel-eslint": "^10.1.0","babel-loader": "^8.1.0","css-loader": "^4.3.0","eslint": "^7.9.0","eslint-config-react": "^1.1.7","eslint-loader": "^4.0.2","eslint-plugin-react": "^7.20.6","html-webpack-plugin": "^4.4.1","less": "^3.12.2","less-loader": "^7.0.1","prettier": "2.1.1","style-loader": "^1.2.1","webpack": "^4.44.1","webpack-cli": "^3.3.12","webpack-dev-server": "^3.11.0"
}
}
这是我的webpack.config.js:
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: './src/index.js',output: {
// path: __dirname + '/dist',path: path.resolve(__dirname,'build'),publicPath: '/',filename: 'bundle.js'
},devServer: {
contentBase: './build'
},module: {
rules: [
{
test: /\.(js|jsx)$/,exclude: /node_modules/,use: ['babel-loader','eslint-loader']
},{
test: /\.less$/,use: [
'style-loader','css-loader','less-loader',],}
]
},plugins: [
new HtmlWebpackPlugin({
template: path.resolve('./index.html'),})],};
这是我的.eslintrc:
{
"parser": "babel-eslint","extends": "react","env": {
"browser": true,"node": true
},"settings": {
"react": {
"version": "detect"
}
}
}
这是我的.babelrc:
{
"presets": [
"@babel/preset-env","@babel/preset-react"
],"plugins": [
"@babel/plugin-proposal-class-properties"
]
}
有人有什么建议吗?我竭尽全力试图解决这个问题,但遇到了很多麻烦。它加载了网页,但是根本没有使用反应。
提前谢谢!!非常感谢您的帮助。
解决方法
我在使用 create-react-app 时遇到了类似的问题
纱线添加 eslint-config-react-app -D
我认为你应该尝试:
纱线添加 eslint-config-react -D
,在对依赖项(react-scripts、react ...)进行大升级后出现此错误,解决方案是删除 yarn.lock 文件
,我正在经历相同的教程,并且遇到了相同的问题。我想出了几件事:
软件包eslint-config-react
已过时。它已有4年没有更新了,因此我将其卸载了,而是安装了eslint-config-airbnb
(作为devDependency)。还有其他的eslint配置包,但是我听说Airbnb的样式指南非常受欢迎。然后在我的eslintrc文件中,将"extends": "react"
替换为"extends": "airbnb"
:
{
"parser": "babel-eslint","extends": "airbnb","env": {
"browser": true,"node": true
},"settings": {
"react": {
"version": "detect"
}
}
}
问题是eslint-config-react
软件包。
将此留在此处以供将来参考:
在我的情况下,这是因为我正在使用Lerna,并且它提升了一些必要的依赖关系。在nohoist
文件中添加lerna.json
选项对我来说解决了这个问题:
"nohoist": [
"*react*","*react*/**","*react-native*","*react-native*/**"
],
,
如果您使用的是 Yarn 2(浆果)
在 .yarnrc.yml 文件中添加 nodeLinker: node-modules
如https://yarnpkg.com/getting-started/install中指定
,收到消息“无法加载配置“react-app”以从... 我从 package.json 中删除了以下几行:
"eslintConfig": {
"extends": [
"react-app"
]
},
它奏效了