[Bug] Linter is running after upgrading to create-react-app 4.x

[stephenh]

After upgrading to create-react-app 4.x, our webpack config had a ESLintWebpackPlugin auto-added/imported from the CRA config, that was not there when running create-react-app 3.x.

This meant that every hot reload cycle now did an eslint pass, which took our hot reload time from ~3-5s to ~30-40s, a 10x increase.

This addition to our main.js file removed the eslint pass and got us back to acceptable reload times:

  webpackFinal: async config => {
    // Make our `src/...` imports work
    config.resolve.modules.push(__dirname, "./");
    // Starting with cra-4, the eslint plugin showed up and takes ~30s to run on each hot reload. Remove it.
    const maybeEsLintPlugin = config.plugins.pop();
    if (!maybeEsLintPlugin.options || !maybeEsLintPlugin.options.eslintPath) {
      throw new Error("We tried to remove the ESLintWebpackPlugin but removed something else");
    }
    return config;
  },

[Yama-Tomo]

Same issue. The memory usage of the build increased 2.3 times compared to before the upgrade to CRA v4.

My workaround is the following.

// .storybook/main.js

webpackFinal: (config) => {
  config.plugins = config.plugins.filter((plugin) => plugin.constructor.name !== 'ESLintWebpackPlugin')

  return config
}