CODEWITHSUNDEEP
reactjswebpackconfigurationwebpack-dev-serverreact-scripts
Sindujan Nirmalan
Sindujan Nirmalan

Reputation: 461

Add webpack plugins through config-overrides.js

I'm using react app with customized configuration without ejecting and for that I'm using react-app-rewire. To provide plugins to webpack, I used react-app-rewire-provide-plugin. After updating my react-scripts to the latest version the react-app-rewire-provide-plugin is not supporting. Therefore I need to find a method to add plugins to my webpack configuration. Any solutions? Thanks in advance

Upvotes: 3

Views: 4915

Answers (1)

Ovidiu Cristescu
Ovidiu Cristescu

Reputation: 1043

const {
  override,
  addBabelPlugins,
  addExternalBabelPlugins,
  addWebpackPlugin,
} = require('customize-cra');

const {DefinePlugin} = require('webpack');

module.exports = override(
  ...addBabelPlugins('babel-plugin-react-native-web'),
  ...addExternalBabelPlugins(
    'react-native-web',
    ['@babel/plugin-proposal-decorators', {legacy: true}],
  ),
  addWebpackPlugin(
    new DefinePlugin({
      __DEV__: process.env.NODE_ENV !== 'production',
    }),
  ),
);

Real example: https://github.com/criszz77/luna/blob/ccaac73f82574fb409b69843e260dd58a3f68f8c/template/config-overrides.js

I’ve been using react-app-rewired along with customize-cra to pass plugins to the webpack without ejecting.

What you’re seeing here is a PR to replace craco with react-app-rewired (apparently it works wirh react-scripts@5 now)

Upvotes: 1

Related Questions