wrong eslint rules when extending from plugins (because 'react-scripts start' uses own, outdated version of plugin)

Describe the bug

I added to my CRA with the TypeScript template some ESLint settings, but yarn start complained about errors in rules, which were not part of my eslint settings and which weren’t shown up, when running eslint src/**/*.{ts,tsx}

After hours of searching I found the bug:

react-scripts has it’s own, outdated version of @typescript-eslint/eslint-plugin (^2.10.0 instead of 3.0.1). That’s why extending plugin:@typescript-eslint/recommended resulted in different rules when yarn start ran react-scripts start than eslint src/**/*.{ts,tsx}

Steps to reproduce

yarn add eslint typescript @typescript-eslint/parser @typescript-eslint/eslint-plugin

… actually also the libraries eslint-config-prettier, eslint-plugin-prettier, eslint-plugin-react but doesn’t matter to describe the issue here.

In .env I added

EXTEND_ESLINT=true

I added .eslintrc.js (simplified for this issue)

module.exports = {
  parser: "@typescript-eslint/parser", // Specifies the ESLint parser
  extends: [
    "eslint:recommended",
    // Uses the recommended rules from the @typescript-eslint/eslint-plugin
    "plugin:@typescript-eslint/recommended",
  ],
  env: {
    "es6": true,
    "node": true,
  },
  rules: {
  },
};

I removed this in package.json

"eslintConfig": {
    "extends": "react-app"
},

And had these scripts in package.json

"scripts": {
    "start": "react-scripts start",
    ...
    "lint": "eslint src/**/*.{ts,tsx}"
},

Result

• yarn start gave me warnings & errors for rules @typescript-eslint/explicit-function-return-type, @typescript-eslint/no-use-before-define
• yarn lint gave me no wwarnings or errors for these rules
• these rules are not part of plugin:@typescript-eslint/recommended@3.0.1 but part of plugin:@typescript-eslint/[e-mail].X

Expected behavior

When I create my .eslintrc.* and install the eslint plugins I need, I expect that the version of my installed plugins are used, and not some older version of react-scripts’ own dependencies.

Proposal

Change react-sccripts/config/webpack.config.js this block:

{
  test: /\.(js|mjs|jsx|ts|tsx)$/,
  enforce: 'pre',
  use: [
    {
      options: {
        cache: true,
        formatter: require.resolve('react-dev-utils/eslintFormatter'),
        eslintPath: require.resolve('eslint'),
        resolvePluginsRelativeTo: __dirname,
        // @remove-on-eject-begin
        ignore: isExtendingEslintConfig,
        baseConfig: isExtendingEslintConfig
          ? undefined
          : {
              extends: [require.resolve('eslint-config-react-app')],
            },
        useEslintrc: isExtendingEslintConfig,
        // @remove-on-eject-end
      },
      loader: require.resolve('eslint-loader'),
    },
  ],
  include: paths.appSrc,
},

ideas

• Idea A: Maybe an additional .env setting which defines that resolvePluginsRelativeTo will be set to root of app
• Idea B: resolvePluginsRelativeTo will always be set to app root, if isExtendingEslintConfig is true (.env has EXTEND_ESLINT)

dependencies (not so relevant)

I use yarn in v1.22.0

Before writing this issue, I deleted yarn.lock, node_modules and re-installed.

In my package.json was

"@typescript-eslint/eslint-plugin": "^3.0.2"

In node_modules/react-scripts/package.json was

"@typescript-eslint/eslint-plugin": "^2.10.0",

In yarn.lock

"@typescript-eslint/eslint-plugin@^2.10.0":
  version "2.33.0"
  ....
"@typescript-eslint/eslint-plugin@^3.0.2":
  version "3.0.2"
  ....

In node_modules/@typescript-eslint/eslint-plugin/package.json

"version": "3.0.2",

In node_modules/react-scripts/node_modules/@typescript-eslint/eslint-plugin/package.json

"version": "2.34.0",

yarn --version v1.22.0

Environment (not so relevant)

current version of create-react-app: 3.4.1
  running from /Users/XXX/.npm/_npx/43288/lib/node_modules/create-react-app

  System:
    OS: macOS 10.15.4
    CPU: (12) x64 Intel(R) Core(TM) i7-9750H CPU @ 2.60GHz
  Binaries:
    Node: 14.3.0 - /usr/local/bin/node
    Yarn: 1.22.0 - /usr/local/bin/yarn
    npm: 6.14.4 - /usr/local/bin/npm
  Browsers:
    Chrome: 83.0.4103.61
    Firefox: Not Found
    Safari: 13.1
  npmPackages:
    react: ^16.13.1 => 16.13.1
    react-dom: ^16.13.1 => 16.13.1
    react-scripts: Not Found
  npmGlobalPackages:
    create-react-app: Not Found

[namoscato]

It looks like this will be resolved in react-scripts@4.0 with #9434 and #9587.

[0xdevalias]

deleting my lock file (package-lock.json) and then npm i solved my issue.

@InSuperposition Thanks for this! It helped me narrow down the issue, and while deleting our package-lock.json wasn’t something we were willing to do, I found that by using npm dedup it also seemed to solve the issue for us (see https://github.com/sparkletown/sparkle/pull/1102#issuecomment-828315978):

• https://docs.npmjs.com/cli/v6/commands/npm-dedupe