create react app eslint prettier configuration

Question

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?

Answer 1

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.