Webpack showing warnings that are no longer relevant - Create-react-app - reactjs

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',
},
},
],
}

Related

Setting the property "files" in Eslint Config throws an error with Eslint VSCode Extension

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.

plugin:react-hooks/recommended not working in React/Parcel app

I have hooks with missing dependencies, but running eslint does not complain about them. My .eslintrc.js looks like:
module.exports = {
env: {
browser: true,
es2021: true,
},
extends: [
'eslint:recommended',
'plugin:react/recommended',
'plugin:#typescript-eslint/recommended',
'plugin:react-hooks/recommended',
],
parser: '#typescript-eslint/parser',
parserOptions: {
ecmaFeatures: {
jsx: true,
},
ecmaVersion: 'latest',
sourceType: 'module',
},
settings: {
react: {
version: 'detect',
},
},
plugins: ['react', '#typescript-eslint', 'react-hooks'],
rules: {
'#typescript-eslint/ban-ts-ignore': 'off',
'#typescript-eslint/no-non-null-assertion': 'off',
'#typescript-eslint/no-empty-function': 'off',
'no-mixed-spaces-and-tabs': 'off',
'#typescript-eslint/no-explicit-any': 'off',
'#typescript-eslint/ban-ts-comment': 'off',
'react/prop-types': 'off',
},
};
How do I get the missing hook dependency warnings?

Typescript eslint showing errors but not files

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

create react app eslint prettier configuration

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.

Definition for rule 'simple-import-sort/sort' was not found simple-import-sort/sort

I'm using react with the simple-import-sort eslint plugin. I think my .eslintrc.js is right, but I'm not able to make this specific plugin work. I get the following errors at the first line of my files:
Definition for rule 'simple-import-sort/sort' was not found simple-import-sort/sort
Here's my config:
module.exports = {
parser: '#typescript-eslint/parser',
extends: [
'eslint:recommended',
'airbnb-typescript',
'airbnb/hooks',
'plugin:#typescript-eslint/recommended',
'plugin:#typescript-eslint/recommended-requiring-type-checking',
'plugin:import/recommended',
'plugin:jest/recommended',
'plugin:jsx-a11y/recommended',
'plugin:prettier/recommended',
'plugin:react/recommended',
'prettier',
'prettier/#typescript-eslint',
'prettier/react',
],
parserOptions: {
ecmaVersion: 2018,
sourceType: 'module',
ecmaFeatures: {
jsx: true,
},
project: './tsconfig.json',
},
ignorePatterns: ['*.js'],
plugins: ['react', 'prettier', 'import', 'simple-import-sort'],
rules: {
'prettier/prettier': ['error'],
'no-underscore-dangle': 'off',
'no-async-promise-executor': 'warn',
'no-unused-vars': 'error',
'object-shorthand': ["error", "always"],
'react/destructuring-assignment': ['off', 'never'],
'react/jsx-filename-extension': ['warn', { extensions: ['.tsx', '.js', '.jsx'] }],
'react/jsx-uses-react': 'error',
'react/jsx-uses-vars': 'error',
'react/no-unescaped-entities': 'off',
'react/jsx-no-undef': ['error', { allowGlobals: true }],
'react/jsx-props-no-spreading': 'warn',
'react/prop-types': 'off',
'react-hooks/exhaustive-deps': 'off',
'sort-imports': 'off',
'simple-import-sort/sort': 'error',
'import/order': 'off',
'import/prefer-default-export': 'off',
'import/extensions': 'off',
'import/no-extraneous-dependencies': ['error', { devDependencies: true }],
// '#typescript-eslint/camelcase': ['error', { properties: 'never' }],
'#typescript-eslint/no-var-requires': 'off',
'#typescript-eslint/explicit-function-return-type': 'off',
'jsx-a11y/anchor-is-valid': 'off',
'jsx-a11y/no-static-element-interactions': 'off',
},
};
It may be that you're using v6.
It looks like v6 doesn't have a simple-import-sort/sort rule, see usage in the README. This was a change from v5 on Nov 15.
You probably need to make the following change:
- 'simple-import-sort/sort': 'error',
+ 'simple-import-sort/imports': 'error',
Form Version 6.0.0 of eslint-plugin-simple-import-sort:
Renamed: simple-import-sort/sort is now called
simple-import-sort/imports.
Added: simple-import-sort/exports for
sorting (some) exports.
{
"rules": {
"simple-import-sort/imports": "error",
"simple-import-sort/exports": "error"
}
}
I also had to add "simple-import-sort" to "plugins" in .eslintrc:
{
"plugins": ["simple-import-sort"]
}
and then it got rid of the errors.

Resources