@typescript-eslint compile error different to linting errors

Question

I'm running create-react-app and am receiving a failed to compile error when I run my project.

I think this is a general problem whereby I don't receive any errors/warnings in my VS Code, but when I run the project I get breaking errors reported in my browser and console due to @typescript-eslint. This makes me think that the compiler isn't following the same rules as my linter, but I don't understand if/how that works, or how to fix it.

The specific error I'm having is:

Definition for rule '@typescript-eslint/ban-ts-ignore' was not found

I introduced this in a component .tsx file:

// @ts-ignore
controlValue={idealTeeMeasuresState[eachMeasureKey]}

My eslintrc.json contains the following:

    "rules": {
        "react/prop-types": 1, //changed from "off"
        "react/no-unescaped-entities": 1,
        "no-unused-vars": ["warn", { "vars": "all", "args": "after-used", "ignoreRestSiblings": false }],
        "no-undef": 1,
        "no-extra-semi": 1,
        "@typescript-eslint/no-extra-semi": ["warn"],
        "@typescript-eslint/ban-ts-comment": "warn"
    },

package.json

{
  "name": "here-i-go",
  "version": "0.2.32",
  "private": true,
  "dependencies": {
    "@babel/core": "7.9.0",
    "@material-ui/core": "^4.11.2",
    "@material-ui/icons": "^4.11.2",
    "@material-ui/lab": "^4.0.0-alpha.57",
    "@sentry/react": "^6.3.1",
    "@sentry/tracing": "^6.3.1",
    "@svgr/webpack": "4.3.3",
    "@testing-library/jest-dom": "^4.2.4",
    "@testing-library/react": "^9.5.0",
    "@testing-library/user-event": "^7.2.1",
    "@types/jest": "^26.0.23",
    "@types/node": "^14.14.37",
    "@types/react": "^17.0.6",
    "@types/react-dom": "^17.0.5",
    "axios": "^0.21.1",
    "babel-jest": "^24.9.0",
    "babel-loader": "8.1.0",
    "babel-plugin-named-asset-import": "^0.3.6",
    "babel-preset-react-app": "^9.1.2",
    "camelcase": "^5.3.1",
    "case-sensitive-paths-webpack-plugin": "2.3.0",
    "chart.js": "^2.9.4",
    "chartjs-plugin-datalabels": "^0.7.0",
    "clsx": "^1.1.1",
    "cross-fetch": "^3.0.6",
    "css-loader": "3.4.2",
    "distinct-colors": "^3.0.0",
    "dotenv": "8.2.0",
    "dotenv-expand": "5.1.0",
    "eslint-loader": "^4.0.2",
    "file-loader": "4.3.0",
    "firebase": "^7.24.0",
    "firebase-admin": "^9.4.2",
    "firebase-functions": "^3.13.1",
    "fs-extra": "^8.1.0",
    "html-webpack-plugin": "4.0.0-beta.11",
    "identity-obj-proxy": "3.0.0",
    "jest": "24.9.0",
    "jest-environment-jsdom-fourteen": "1.0.1",
    "jest-resolve": "24.9.0",
    "jest-watch-typeahead": "0.4.2",
    "luxon": "^1.25.0",
    "match-sorter": "^4.2.1",
    "mini-css-extract-plugin": "0.9.0",
    "moment": "^2.29.1",
    "netlify-cli": "^3.4.5",
    "notistack": "^1.0.2",
    "optimize-css-assets-webpack-plugin": "5.0.3",
    "pnp-webpack-plugin": "1.6.4",
    "postcss-flexbugs-fixes": "4.1.0",
    "postcss-loader": "3.0.0",
    "postcss-normalize": "8.0.1",
    "postcss-preset-env": "6.7.0",
    "postcss-safe-parser": "4.0.1",
    "react": "^17.0.1",
    "react-app-polyfill": "^1.0.6",
    "react-chartjs-2": "^2.11.1",
    "react-cookie": "^4.0.3",
    "react-dev-utils": "^11.0.4",
    "react-dom": "^17.0.1",
    "react-firebaseui": "^4.1.0",
    "react-ga": "^3.3.0",
    "react-hook-form": "^6.13.1",
    "react-instantsearch": "^6.8.2",
    "react-joyride": "^2.3.0",
    "react-moment": "^0.9.7",
    "react-plain-carousel": "^1.3.1",
    "react-router-dom": "^5.2.0",
    "react-router-hash-link": "^2.4.0",
    "react-scripts": "^4.0.3",
    "resolve": "1.15.0",
    "resolve-url-loader": "^3.1.2",
    "sass-loader": "8.0.2",
    "semver": "6.3.0",
    "source-map-explorer": "^2.5.1",
    "style-loader": "0.23.1",
    "terser-webpack-plugin": "^2.3.8",
    "ts-pnp": "1.1.6",
    "url-loader": "2.3.0",
    "webpack": "4.42.0",
    "webpack-dev-server": "^3.11.2",
    "webpack-manifest-plugin": "2.2.0",
    "workbox-webpack-plugin": "4.3.1",
    "xyz": "^4.0.0"
  },
  "scripts": {
    "start": "node scripts/start.js",
    "startLocal": "REACT_APP_NODE_ENV=development node scripts/start.js",
    "build": "node scripts/build.js && cat src/custom-service-worker.js >> build/service-worker.js",
    "test": "node scripts/test.js",
    "analyze": "source-map-explorer 'build/static/js/*.js'",
    "gitaddAndCommit": "npm version patch -no-git-tag-version  && npm run generate-build-version && git add . && git commit -m 'commit for deploy'",
    "commitPatch": "node scripts/gitCommitAndPatch",
    "gitPush": "git push origin master --tag",
    "pushAndNetlifyDeploy": "git push origin master --tag && netlify deploy --prod",
    "eject": "react-scripts eject",
    "generate-build-version": "node generate-build-version",
    "prebuild": "npm run generate-build-version"
  },
  "ss-scripts": {
    "BuildAndDeployFirebase": "node scripts/build.js && firebase deploy --only hosting",
    "startHeroku": "REACT_APP_NODE_ENV=production node scripts/start.js"
  },
  "eslintConfig": {
    "extends": "react-app",
    "rules": {
      "@typescript-eslint/no-unused-vars": 1,
      "@typescript-eslint/ban-ts-comment": "off",
      "ban-ts-comment": "off"
    }
  },
  "eslintIgnore": [
    "**/*.js",
    "**/*.jsx"
  ],
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "jest": {
    "roots": [
      "<rootDir>/src"
    ],
    "collectCoverageFrom": [
      "src/**/*.{js,jsx,ts,tsx}",
      "!src/**/*.d.ts"
    ],
    "setupFiles": [
      "react-app-polyfill/jsdom"
    ],
    "setupFilesAfterEnv": [
      "<rootDir>/src/setupTests.js"
    ],
    "testMatch": [
      "<rootDir>/src/**/__tests__/**/*.{js,jsx,ts,tsx}",
      "<rootDir>/src/**/*.{spec,test}.{js,jsx,ts,tsx}"
    ],
    "testEnvironment": "jest-environment-jsdom-fourteen",
    "transform": {
      "^.+\\.(js|jsx|ts|tsx)$": "<rootDir>/node_modules/babel-jest",
      "^.+\\.css$": "<rootDir>/config/jest/cssTransform.js",
      "^(?!.*\\.(js|jsx|ts|tsx|css|json)$)": "<rootDir>/config/jest/fileTransform.js"
    },
    "transformIgnorePatterns": [
      "[/\\\\]node_modules[/\\\\].+\\.(js|jsx|ts|tsx)$",
      "^.+\\.module\\.(css|sass|scss)$"
    ],
    "modulePaths": [],
    "moduleNameMapper": {
      "^react-native$": "react-native-web",
      "^.+\\.module\\.(css|sass|scss)$": "identity-obj-proxy"
    },
    "moduleFileExtensions": [
      "web.js",
      "js",
      "web.ts",
      "ts",
      "web.tsx",
      "tsx",
      "json",
      "web.jsx",
      "jsx",
      "node"
    ],
    "watchPlugins": [
      "jest-watch-typeahead/filename",
      "jest-watch-typeahead/testname"
    ]
  },
  "babel": {
    "presets": [
      "@babel/preset-env",
      "@babel/preset-react",
      "@babel/preset-typescript"
    ],
    "plugins": [
      "@babel/plugin-proposal-nullish-coalescing-operator",
      "@babel/plugin-proposal-optional-chaining"
    ]
  },
  "devDependencies": {
    "@babel/preset-typescript": "^7.9.0",
    "@types/material-ui": "^0.21.8",
    "@types/react-router-dom": "^5.1.7",
    "@typescript-eslint/eslint-plugin": "^4.24.0",
    "@typescript-eslint/parser": "^4.24.0",
    "eslint": "^7.27.0",
    "eslint-plugin-import": "^2.23.3",
    "eslint-plugin-jsx-a11y": "^6.4.1",
    "eslint-plugin-node": "^11.1.0",
    "eslint-plugin-react": "^7.23.2",
    "typescript": "^3.9.9"
  }
}

.eslintrc.json

{
    "root": true,
    "parser": "@typescript-eslint/parser",
    "plugins": ["react", "@typescript-eslint", "eslint-plugin-node", "@typescript-eslint", "react-hooks"],
    // "files": ["**/*.ts", "**/*.tsx"],
    "env": {
        "browser": true,
        "es6": true,
        "node": true
    },
    "extends": ["plugin:react/recommended", "plugin:@typescript-eslint/recommended"],
    "parserOptions": {
        "ecmaFeatures": {
            "jsx": true,
            "modules": true
        },
        "ecmaVersion": 11,
        "sourceType": "module",
        "allowImportExportEverywhere": true
    },
    "rules": {
        "react/prop-types": 1, //changed from "off"
        "react/no-unescaped-entities": 1,
        "no-unused-vars": ["warn", { "vars": "all", "args": "after-used", "ignoreRestSiblings": false }],
        "no-undef": 1,
        "no-extra-semi": 1,
        "ban-ts-comment": "warn",
        "@typescript-eslint/ban-ts-comment": "warn",
        "@typescript-eslint/no-extra-semi": ["warn"]
    },
    "settings": {
        "react": {
            "version": "detect"
        }
    }
}

Answer 1

You have this line included in your .eslintrc.json.

"plugins": ["react", "@typescript-eslint", "eslint-plugin-node", "@typescript-eslint", "react-hooks"],

But I can't see these packages installed in your package.json file. Hence you get the errors.

Refer to eslint-config-react-app in create-react-app repo.

Here is the ref link. https://github.com/facebook/create-react-app/tree/main/packages/eslint-config-react-app