Changed ESLint, React errors no longer show in browser

Question

I'm working on a project with multiple people, and we changed our ESLint a bit. If there were React/ ESLint errors, it would fail to compile and show the errors in the browser.

The project was made using CRA a few years ago and is still on React 17

The problem: Since changing, all the errors go to the Problems tab and the browser just freezes. Also, the errors appear in the dev tools. It's almost like the errors are just going to the wrong spot. I'd really like the errors to also appear in the browser.

Here is my.eslintrc.js: Any ideas?

  env: {
    browser: true,
    node: true,
    es6: true,
    es2021: true,
  },
  extends: ['airbnb', 'prettier'],
  overrides: [],
  parserOptions: {
    ecmaVersion: 12,
    sourceType: 'module',
  },
  ignorePatterns: ['src/assets/js/*.js', 'node_modules/*'],
  plugins: ['react', 'prettier'],
  rules: {
    'prettier/prettier': ['error'],
    'react/prop-types': 'off',
    'react/jsx-filename-extension': [1, { extensions: ['.js', '.jsx'] }],
    camelcase: 'off',
    'jsx-a11y/no-static-element-interactions': 'off',
    'import/no-extraneous-dependencies': 'off',
    'default-param-last': 'off',
  },
};

It could be some local error unrelated to ESLint, but I just changed that and a few dependencies.

package.json

    "eslint-config-airbnb": "^19.0.4",
    "eslint-config-prettier": "^8.5.0",
    "eslint-plugin-import": "^2.26.0",
    "eslint-plugin-jsx-a11y": "^6.6.1",
    "eslint-plugin-prettier": "^4.2.1",
    "eslint-plugin-react": "^7.31.11",
    "eslint-plugin-react-hooks": "^4.6.0",

Thank you, I'd really appreciate any help.

Answer 1

I solved it. I deleted our package-lock.json at some point when doing a new npm install and somehow that caused this error. I thought it was typically okay to delete lock files, but after I added it back and did a fresh install it all seems okay now.