[英]Failed to load config "react" to extend from
I am trying to create a react app without using create-react-app using the following website:我正在尝试使用以下网站在不使用 create-react-app 的情况下创建一个反应应用程序:
https://www.freecodecamp.org/news/how-to-set-up-deploy-your-react-app-from-scratch-using-webpack-and-babel-a669891033d4/ https://www.freecodecamp.org/news/how-to-set-up-deploy-your-react-app-from-scratch-using-webpack-and-babel-a669891033d4/
however, I keep getting this error that says但是,我不断收到这个错误,上面写着
WARNING in./src/index.js Module Warning (from./node_modules/eslint-loader/dist/cjs.js): Failed to load config "react" to extend from. WARNING in./src/index.js 模块警告(来自./node_modules/eslint-loader/dist/cjs.js):无法加载配置“react”以扩展自。
I have tried installing all the dependencies and have spent hours googling an answer, but I can't seem to figure out the problem.我已经尝试安装所有依赖项并花了几个小时在谷歌上搜索答案,但我似乎无法找出问题所在。
This is my package.json:这是我的 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"
}
}
this is my webpack.config.js:这是我的 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'),
})],
};
this is my.eslintrc:这是我的.eslintrc:
{
"parser": "babel-eslint",
"extends": "react",
"env": {
"browser": true,
"node": true
},
"settings": {
"react": {
"version": "detect"
}
}
}
and this is my.babelrc:这是 my.babelrc:
{
"presets": [
"@babel/preset-env",
"@babel/preset-react"
],
"plugins": [
"@babel/plugin-proposal-class-properties"
]
}
Does anyone have any suggestions?有没有人有什么建议? I am wracking my brain trying to figure this out and I am having a lot of trouble.
我正在绞尽脑汁想弄清楚这一点,但我遇到了很多麻烦。 It loads the webpage, however, react isn't utilized at all.
它加载网页,但是根本没有使用反应。
Thank you in advance.!先感谢您。! I really appreciate all your help.
我真的很感谢你的帮助。
I had a similar problem with create-react-app
and I did我在
create-react-app
遇到了类似的问题,我做到了
yarn add eslint-config-react-app -D
I think you should try:我认为你应该尝试:
yarn add eslint-config-react -D
在对依赖项( react-scripts
, react
... )进行大升级后出现此错误,解决方案是删除yarn.lock
文件
I was going through the same tutorial and came across the same problem.我正在阅读相同的教程并遇到了同样的问题。 I figured out a few things:
我想出了几件事:
The package eslint-config-react
is outdated.包
eslint-config-react
已过时。 It hasn't been updated in 4 years, so I uninstalled that and instead installed (as a devDependency) eslint-config-airbnb
.它已经 4 年没有更新了,所以我卸载了它,而是安装了(作为 devDependency)
eslint-config-airbnb
。 There are other eslint config packages, but Airbnb's style guide I heard is very popular.还有其他的 eslint 配置包,但我听说 Airbnb 的 style guide 很受欢迎。 Then in my eslintrc file I replaced
"extends": "react"
to "extends": "airbnb"
:然后在我的 eslintrc 文件中,我将
"extends": "react"
替换为"extends": "airbnb"
:
{
"parser": "babel-eslint",
"extends": "airbnb",
"env": {
"browser": true,
"node": true
},
"settings": {
"react": {
"version": "detect"
}
}
}
The problem is the eslint-config-react
package.问题是
eslint-config-react
包。
Leaving this here for future reference:留在这里以供将来参考:
In my case this was happening because I was using Lerna and it was hoisting up some of the necessary dependencies.就我而言,发生这种情况是因为我正在使用 Lerna 并且它正在提升一些必要的依赖项。 Adding
nohoist
option to the lerna.json
file resolved the issue for me:添加
nohoist
选项将lerna.json
文件解决了这个问题对我来说:
"nohoist": [
"*react*",
"*react*/**",
"*react-native*",
"*react-native*/**"
],
I was having the same issue.我遇到了同样的问题。 I did these steps and it worked.
我做了这些步骤,它奏效了。
Install it as a dependency将其安装为依赖项
npm i eslint-config-react-app
then in your root folder, create a file name .eslintrc.json and add this code in that file然后在您的根文件夹中,创建一个文件名.eslintrc.json并将此代码添加到该文件中
"extends": "react-app"
I fix it installing eslint-config-react-app
package manually:我修复它手动安装
eslint-config-react-app
包:
yarn add eslint-config-react-app -D
# or
npm install -D eslint-config-react-app
When I removed当我删除
"extends": [
"react-app"
]
},
from package.json
it worked.从
package.json
它工作。
This is because the eslint-config-react-app
package is outdated.这是因为
eslint-config-react-app
包已经过时了。
If you cloned the repo from GitHub or any other version control system, try adding this file .eslintrc.json to your root folder.如果您从 GitHub 或任何其他版本控制系统克隆了 repo,请尝试将此文件.eslintrc.json添加到您的根文件夹。 Don't forget the
.
不要忘记
.
at the beginning.一开始。
The first answer works like a charm as well.第一个答案也很有魅力。 Just thought I would add mine as well.
只是想我也会添加我的。
If you are using Yarn 2(berry)如果您使用的是 Yarn 2(浆果)
Add nodeLinker: node-modules in your .yarnrc.yml file在 .yarnrc.yml 文件中添加 nodeLinker: node-modules
As specified in https://yarnpkg.com/getting-started/install如https://yarnpkg.com/getting-started/install 中所述
After getting the message "Failed to load config “react-app” to extend from... I removed the following lines from package.json:在收到消息“Failed to load config ‘react-app’ to extend from... 我从 package.json 中删除了以下几行:
"eslintConfig": {
"extends": [
"react-app"
]
},
And it worked它起作用了
For fixing this issue you need to run this command in your project folder.要解决此问题,您需要在项目文件夹中运行此命令。 First step:
第一步:
yarn set version berry
After run that, one file and folder will be generated in your local folder (Project folder) :运行后,将在您的本地文件夹(项目文件夹)中生成一个文件和文件夹:
Second step: Add nodeLinker: node-modules in your .yarnrc.yml file第二步:在 .yarnrc.yml 文件中添加nodeLinker: node-modules
Third step: run this command yarn install
第三步:运行此命令
yarn install
Finally run yarn start
最后运行
yarn start
Tip : This approach is useful when you want to migrate from yarn 1.x to 2.x or 3x or higher.提示:当您想从 yarn 1.x 迁移到 2.x 或 3x 或更高版本时,此方法很有用。
even I had this issue, listing down steps to solve this issue.甚至我也遇到了这个问题,列出了解决这个问题的步骤。
npm add eslint-config-react-app
npm 添加 eslint-config-react-app
If you use yarn:如果您使用纱线:
1- Delete: node_modules and yarn.lock 1- 删除:node_modules 和 yarn.lock
2- Run: yarn install 2-运行:纱线安装
Note: For npm should be the same approach.注意:对于 npm 应该是同样的方法。
I've faced the same error when I was trying to deploy my create-react-app template to Vercel.当我尝试将我的 create-react-app 模板部署到 Vercel 时,我遇到了同样的错误。
helped me to deploy successfully.帮助我成功部署。
If you have eslint
in your dependencies, remove that.如果您的依赖项中有
eslint
,请将其删除。
The eslint
from react-scripts
will be used将使用来自
react-scripts
的eslint
"eslint": "^7.32.0"
Had this issue as well.也有这个问题。 If anyone finds themselves in this predicament and you are forking a project, delete the package-lock resolved the issue for me.
如果有人发现自己处于这种困境并且您正在分叉一个项目,请删除包锁为我解决了这个问题。
I have got the same issue.我有同样的问题。
It worked fine.它工作得很好。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.