Eslint 9 support

[jafar-jabr]

What's happening I recently updated my React.js app to use ESLint 9, and I encountered a strange error. After spending considerable effort troubleshooting, I discovered that the issue was related to Craco.

ERROR in [eslint] Invalid Options:
- Unknown options: extensions, resolvePluginsRelativeTo
- 'extensions' has been removed.
- 'resolvePluginsRelativeTo' has been removed.

What should happen expected to work with eslint 9

To reproduce update eslint in your react.js app to v9.X.X

CRACO version 7.1.0

CRACO config

module.exports = {
 ...nothing_special
}

package.json

 ...nothing_special

Additional information if I add

 eslint: {
    enable: false,
  },

to CRACO config it works.

[cullylarson]

My solution has been to just disable it ({eslint: {enable: false}}) and run the lint check separately, before build.

[SolidZORO]

It’s working fine.

// craco-plugin--eslint.js
const path = require('path');

const ESLintPlugin = require('eslint-webpack-plugin');
const { removePlugins, pluginByName, addPlugins } = require('@craco/craco');

module.exports = {
  plugin: {
    overrideWebpackConfig: ({ webpackConfig }) => {
      // remove cra eslint v8
      removePlugins(webpackConfig, pluginByName('ESLintWebpackPlugin'));

      // add eslint v9 support
      addPlugins(webpackConfig, [
        new ESLintPlugin({
          eslintPath: require.resolve('eslint'),
          extensions: ['tsx', 'ts'], // file exts to check
          configType: 'flat',
          emitWarning: true,
          emitError: true,
          failOnError: true, // show ERROR devServer.overlay.client (craco.config.js)
        }),
      ]);

      return webpackConfig;
    },
  },
};

// craco.config.js

const cracoPluginEslint = require('./craco-plugin--eslint');

module.exports = {
  eslint: {
    enable: false,
  },
  plugins: [
 
    cracoPluginEslint, // <----------------- 
  
  ],
...
...
...