Is there a way to override ESLintPlugin options in create-react-app webpack config?

user_6512128 0
Viewed 501

So I was facing an issue with eslint in my react app and I was able to solve it after ejecting the app and added some options to the ESLintPlugin in the webpack.config file.

  new ESLintPlugin({
        // Plugin options
        extensions: ['js', 'mjs', 'jsx', 'ts', 'tsx'],
        formatter: require.resolve('react-dev-utils/eslintFormatter'),
        eslintPath: require.resolve('eslint'),
        context: paths.appSrc,
        failOnError: false, <== this one 
        emitWarning: true, <== and this one
        // ESLint class options
        cwd: paths.appPath,
        resolvePluginsRelativeTo: __dirname,
        baseConfig: {
          extends: [require.resolve('eslint-config-react-app/base')],
          rules: {
            ...(!hasJsxRuntime && {
              'react/react-in-jsx-scope': 'error'
            })
          }
        }
      })

I was wondering if I can do the same thing but without having to eject the app, and use react-app-rewired instead, I already have a config-overrides.js file

module.exports = function override(webpackConfig) {
  webpackConfig.module.rules.push({
    test: /\.mjs$/,
    include: /node_modules/,
    type: 'javascript/auto',
  });
  return webpackConfig;
};

is there a similar way to access the ESLintPlugin function in webpack.config file and add new options to it through config-overrides.js file?

eslint webpack reactjs
1 Answers

This works for me on react-scripts "^5.0.0". The things that i did is just reinitialize eslint webpack plugin in the config-overrides.js

//config-overrides.js
const ESLintPlugin = require('eslint-webpack-plugin') //this package should be exist by default

module.exports = function override(config) {

  for (let i = 0; i < config.plugins.length; i++) {
    if (config.plugins[i].key !== "ESLintWebpackPlugin") continue;
    const currentEslint = config.plugins[i];
    config.plugins[i] = new ESLintPlugin({
      ...currentEslint.options, // using default eslint option
    })
    break;
  }

  return config;
}

by reinitializing it on config-overrides.js it read your custom .eslintrc.json

user_145038890
Related