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.
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.
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.
I recently updated to Material UI5 and had to make a whole bunch of changes in the codebase. I did a lot of this using the VSCode search and replace function.
Now, whenever I build my app, I get a whole string of warnings saying that there is an unused import, even though all of these lines have been removed. (Note: This is all on the dev build)
If I go into the file that is generating the warning and save it (even though there are no changes to be saved) then it seems that webpack recognizes the change and stops issuing the warning.
Is there any way to somehow clear the cache or get webpack to recognize that these warnings aren't current?
File:
Warning:
edit: .eslintrc.js
module.exports = {
parser: '#typescript-eslint/parser',
root: true,
env: {
es6: true,
node: true,
browser: true,
},
parserOptions: {
ecmaVersion: 6,
sourceType: 'module',
tsconfigRootDir: __dirname,
project: './tsconfig.eslint.json',
ecmaFeatures: {
jsx: true,
},
},
plugins: ['react', 'react-hooks', '#typescript-eslint', 'cypress'],
rules: {
'react-hooks/rules-of-hooks': 'error', // Checks rules of Hooks
'react-hooks/exhaustive-deps': 'warn', // Checks effect dependencies
'no-use-before-define': 'off',
'#typescript-eslint/no-use-before-define': ['error'],
'#typescript-eslint/no-namespace': ['off'],
'#typescript-eslint/no-explicit-any': ['off'], // Maybe a good rule, but it's a pain in the ass
},
settings: {
react: {
version: 'detect', // Tells eslint-plugin-react to automatically detect the version of React to use
},
},
extends: [
'eslint:recommended',
'plugin:react/recommended',
'plugin:#typescript-eslint/eslint-recommended',
'plugin:#typescript-eslint/recommended',
// 'plugin:prettier/recommended',
],
overrides: [
{
files: ['**/*.js', '**/*.jsx'],
rules: {
'#typescript-eslint/no-var-requires': 'off',
'#typescript-eslint/eslint-recommended': 'off',
'#typescript-eslint/recommended': 'off',
'#typescript-eslint/explicit-module-boundary-types': 'off',
},
},
{
files: ['**/styles.ts'],
rules: {
'#typescript-eslint/explicit-module-boundary-types': 'off',
'#typescript-eslint/no-unused-vars': 'off',
},
},
],
}
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 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.