react-app-rewired requiring giving mini-css-extract-plugin

Question

I am currently using react-app-rewired with customize-cra. Currently right now, npm start works but npm run build gives the following error.

Error: You forgot to add 'mini-css-extract-plugin' plugin

Not exactly sure whats happening, here is my config-overrides.js file. I've try to add the plugin here but for some reason is not workng and I continue to get this error.

// Overriding CreateReactApp settings, ref: https://github.com/arackaf/customize-cra
const {
  override,
  fixBabelImports,
  addLessLoader,
  useEslintRc,
  addDecoratorsLegacy,
  useBabelRc,
  addWebpackPlugin
} = require('customize-cra')
// eslint config
const eslintConfig = require('./.eslintrc.js');

const useEslintConfig = configRules => config => {
  config.module.rules = config.module.rules.map(
    rule => {
      // Only target rules that have defined a `useEslintrc` parameter in their options
      if (rule.use && rule.use.some(use => use.options && use.options.useEslintrc !== void 0)) {
        const ruleUse = rule.use[0]
        const baseOptions = ruleUse.options
        const baseConfig = baseOptions.baseConfig || {}
        ruleUse.options = {
          useEslintrc: false,
          ignore: true,
          baseConfig: { ...baseConfig, ...configRules },
        }
        return rule

        // Rule not using eslint. Do not modify.
      } else {
        return rule
      }
    }
  );
  return config;
}

module.exports = override(
  addDecoratorsLegacy(),
  fixBabelImports('import', {
    libraryName: 'antd',
    libraryDirectory: 'es',
    style: 'css', // dont use true
  }),
  // eslint-disable-next-line react-hooks/rules-of-hooks
  useEslintRc(),
  addLessLoader({
    lessOptions: {
      javascriptEnabled: true,
    },
  }),
  // eslint-disable-next-line react-hooks/rules-of-hooks
  useEslintConfig(eslintConfig),
  // eslint-disable-next-line react-hooks/rules-of-hooks
  useBabelRc(),
);

any idea why?

Answer 1

The solution for me was to make the following changes in config-overrides.js

const {
  override,
  ...
  addWebpackPlugin, // <- added this line here
} = require('customize-cra')

const MiniCssExtractPlugin = require('mini-css-extract-plugin') // <- added this line here

module.exports = override(
  ...
  addWebpackPlugin(new MiniCssExtractPlugin()), // <- added this line here
)

After that the build process succeeded without any issues.