After I set up ESLint, I got this error Plugin "react" was conflicted between ".eslintrc.js" and "BaseConfig » /frontend/node_modules/react-scripts/node_modules/eslint-config-react-app/base.js".
my .eslintrc.js is like
module.exports = {
env: {
browser: true,
es2021: true,
},
extends: [
'plugin:react/recommended',
'airbnb',
'airbnb/hooks',
'plugin:#typescript-eslint/recommended',
'plugin:#typescript-eslint/recommended-requiring-type-checking',
'prettier',
],
parser: '#typescript-eslint/parser',
parserOptions: {
ecmaFeatures: {
jsx: true,
},
ecmaVersion: 'latest',
sourceType: 'module',
tsconfigRootDir: __dirname,
project: ['./tsconfig.json'],
},
plugins: [
'react',
'#typescript-eslint',
],
ignorePatterns: [
".eslintrc.js"
],
rules: {
'no-use-before-define': "off",
"#typescript-eslint/no-use-before-define": "off",
'import/prefer-default-export': "off",
'import/extensions': [
'error',
{
js: 'never',
jsx: 'never',
ts: 'never',
tsx: 'never',
},
],
'react/jsx-filename-extension': [
'error',
{
extensions: ['.jsx', '.tsx'],
},
],
'react/react-in-jsx-scope': 'off',
'no-void': [
'error',
{
allowAsStatement: true,
},
],
"react/function-component-definition": [
2,
{ "namedComponents": "arrow-function" }
]
},
settings: {
'import/resolver': {
node: {
paths: ['src'],
extensions: ['.js', '.jsx', '.ts', '.tsx']
},
},
},
};
What I have done is
npx create-react-app my-app --template typescript
yarn run eslint --init
yarn add -D #typescript-eslint/eslint-plugin #typescript-eslint/parser
npx install-peerdeps --dev eslint-config-airbnb
How can I remove this error ?
You may need to dedupe eslint-plugin-react in your lockfile.
I fixed the issue by closing and reopening the project folder with code. There must have been a problem with the path name.
Hope this helps :)
I fixed this problem in this way:
if you are using npm remove the package-lock.json file.
if you are using the yarn remove the yarn.lock file.
and then remove the node_module folder and install all of the dependencies again.
You have to disable eslint while react-scripts start.
As of react-scripts v4.0.2, you can now opt out of ESLint with an environment variable. You can do this by adding it to your .env file, or by prefixing your scripts in your package.json file.
For example in .env:
DISABLE_ESLINT_PLUGIN=true
Been there too, and finding the exact answer to this issue is hard to find.
The best solution for now is to remove eslintrc.json.
I faced the same error. After trying every solution I found on the internet, removing eslintrc.js actually helped.
Related
When I try to set the property "files" in the ESLint Config file ".eslintrc.cjs" I get the following error from the EsLint VsCode Extension:
ESLint: ESLint configuration in client.eslintrc.cjs is invalid: - Unexpected top-level property "files". . Please see the 'ESLint' output channel for details.
Every time I ran npm run lint (I include this script in my package.json file "lint": "eslint ./**",), ESlint not only look for errors in .jsx files but also in files like .svg, .png, etc. So, I am trying to add the following property files: ['src/**/*.jsx'], to my ESLint Config File to avoid checking the files outside the src directory and the files that are not .jsx.
This is my .eslintrc.cjs file:
module.exports = {
env: {
browser: true,
es2021: true,
},
extends: [
'airbnb',
'airbnb/hooks',
'plugin:react/recommended',
],
overrides: [
],
parserOptions: {
ecmaVersion: 'latest',
sourceType: 'module',
},
plugins: [
'react',
],
files: ['src/**/*.jsx'],
rules: {
'react/jsx-uses-react': 'off',
'react/react-in-jsx-scope': 'off',
'import/no-extraneous-dependencies': ['error', { devDependencies: true }],
'no-use-before-define': ['error', { functions: false }],
'no-param-reassign': ['error', { props: false }],
},
};
You should use overrides to include files, e.g.,
module.exports = {
env: {
browser: true,
es2021: true,
},
extends: ['airbnb', 'airbnb/hooks', 'plugin:react/recommended'],
overrides: [
{
plugins: ['react'],
files: ['src/**/*.jsx'],
rules: {
'react/jsx-uses-react': 'off',
'react/react-in-jsx-scope': 'off',
'import/no-extraneous-dependencies': [
'error',
{ devDependencies: true },
],
'no-use-before-define': ['error', { functions: false }],
'no-param-reassign': ['error', { props: false }],
},
},
],
parserOptions: {
ecmaVersion: 'latest',
sourceType: 'module',
},
}
See documentation here https://eslint.org/docs/latest/use/configure/configuration-files#how-do-overrides-work.
I'm trying to create a rule to have a one empty line between internal and external imports.
.eslintrc.json:
{
"parser": "#typescript-eslint/parser",
"env": {
"es6": true,
"node": true,
"jest/globals": true,
"browser": true
},
"parserOptions": {
"sourceType": "module",
"ecmaVersion": 2019,
"project": "tsconfig.json",
"ecmaFeatures": {
"jsx": true
}
},
"rules": {
"import/order": [
"error",
{
"groups": [["builtin", "external"]],
"newlines-between": "always"
}
]
}
}
I have the following error:
Compiled with problems:X
ERROR
ESLint configuration in .eslintrc.json is invalid:
- Unexpected top-level property "import/order".
I modified an existing project with a similar eslint config to use your rule. It is working nicely. I have a suspicion your issue is that you don't have an extends property that includes the import rules. Here's my eslint config:
module.exports = {
root: true,
env: {
node: true,
},
parser: '#typescript-eslint/parser',
plugins: ['#typescript-eslint'],
extends: [
'eslint:recommended',
'plugin:#typescript-eslint/eslint-recommended',
'plugin:#typescript-eslint/recommended',
'plugin:import/warnings', // <--- note this inclusion here
],
rules: {
'import/order': [
'error',
{
groups: [['builtin', 'external']],
'newlines-between': 'always',
},
],
},
};
When I run the linter, I get the expected error you want:
13:1 error There should be at least one empty line between import groups import/order
I would try playing with your extends property. I have some stuff in there you may not need at all, and I dont have the jsx stuff for this particular project, but hopefully this will get you started.
Install this dependency: eslint-import-resolver-typescript
# npm
npm i -D eslint-plugin-import #typescript-eslint/parser eslint-import-resolver-typescript
# yarn
yarn add -D eslint-plugin-import #typescript-eslint/parser eslint-import-resolver-typescript
And add import to your plugins :
"plugins": ["import"],
eslint-import-resolver-typescript
I have recently upgraded all my eslint package (typescript, react, eslint imports, etc) and I'm getting the errors but not the files where the errors are.
I'm not sure what I need to post to solve this as I've compared this with a different project which is working. The only thing I've not upgrade yet is webpack.
Here is my EsLintPlugin from the config
new ESLintPlugin({
// Plugin options
extensions: ["js", "jsx", "ts", "tsx"],
formatter: require.resolve("react-dev-utils/eslintFormatter"),
eslintPath: require.resolve("eslint"),
context: paths.appSrc,
cache: true,
failOnWarning: !isEnvDevelopment,
emitWarning: true,
failOnError: !isEnvDevelopment,
cacheLocation: path.resolve(
paths.appNodeModules,
".cache/.eslintcache",
),
// ESLint class options
cwd: paths.appPath,
resolvePluginsRelativeTo: __dirname,
baseConfig: {
extends: [require.resolve("eslint-config-airbnb")],
rules: {
...(!hasJsxRuntime && {
"react/react-in-jsx-scope": "error",
}),
},
},
}),
Here is what I mean with the errors showing but no files.
Let me know if I need to post anything else.
Thanks for you help
I'm getting these error messages:
but i don't get any errors on vscode
this is my elint configration
const path = require('path');
module.exports = {
env: {
browser: true,
es2021: true,
node: true,
},
extends: [
'airbnb',
'prettier',
'prettier/react',
'plugin:react/recommended',
'plugin:prettier/recommended',
'plugin:import/errors',
'plugin:import/warnings',
],
parserOptions: {
ecmaFeatures: {
jsx: true,
},
ecmaVersion: 12,
sourceType: 'module',
},
plugins: ['react', 'import', 'prettier'],
rules: {
'prettier/prettier': 'error',
'react/jsx-uses-react': 'off',
'react/react-in-jsx-scope': 'off',
'import/named': 'off',
'import/no-self-import': 'off',
'import/no-extraneous-dependencies': 'off',
'react/jsx-props-no-spreading': 'off',
'import/prefer-default-export': 'off',
'no-param-reassign': [
'error',
{ props: true, ignorePropertyModificationsFor: ['draft'] },
],
},
settings: {
'import/resolver': {
alias: {
map: [['#', path.join(path.resolve(__dirname, './src'))]],
extensions: ['.js', '.jsx', '.json'],
},
node: {
extensions: ['.js', '.jsx'],
},
},
},
};
whats wrong with my configuration?
this is my component that i getting error:
as you see there is no error.
note: eslint and prettier extensions are enabled and work successfully. and before these errors , i got errors and vscode displays errors and i'm sure vscode eslint works.
what is wrong?
I think the errors are caused by the webpack configuration which ships with create-react-app.
The webpack process started behind the scenes when calling npm start in your project doesn't know anything about the aliases you specified in your custom eslint configuration file. Your custom eslint-config-file is only used by your editor (or more specific by your enabled eslint-extension) and I believe there is no smooth way to change this (without creating your own webpack config).
See also https://create-react-app.dev/docs/setting-up-your-editor/#displaying-lint-output-in-the-editor which describes what I have written above.
Note that even if you customise your ESLint config, these changes will only affect the editor integration. They won’t affect the terminal and in-browser lint output. This is because Create React App intentionally provides a minimal set of rules that find common mistakes.
I get the following warnings on every eslint run with config following config. What is it caused by and how do I get rid of it?
eslint warnings
can't resolve reference #/definitions/basicConfig from id #
can't resolve reference #/definitions/basicConfigOrBoolean from id #
can't resolve reference #/definitions/basicConfigOrBoolean from id #
.eslintrc.js
module.exports = {
extends: 'airbnb',
root: true,
env: {
browser: true,
jest: true,
},
plugins: ['react', 'jsx-a11y', 'import', 'jest'],
rules: {
'import/no-extraneous-dependencies': ['error', { devDependencies: true }],
'react/jsx-filename-extension': [0],
'import/prefer-default-export': [0],
},
settings: {
'import/resolver': {
webpack: {
config: 'webpack.config.js',
},
},
},
parser: 'babel-eslint',
};
This error was caused by eslint-plugin-react package (which I found out following this airbnb config issue).
This PR solves the issue and contains more info. The gist is that it was fixed in version 7.2.0 of the eslint-plugin-react package, so all I needed to do was yarn upgrade eslint-plugin-react.