Unable to override webpack configuration for a react application

Summary

I have bootstrapped a react application in my workspace using:

nx generate @nrwl/react:application

I want to override the webpack.config.js to add a few more plugins

I noticed that in the workspace.json for my project there is already webpackConfig option

"architect": {
        "build": {
          "builder": "@nrwl/web:build",
          "options": {
            "webpackConfig": "@nrwl/react/plugins/webpack",

I followed the instructions mentioned here (which may be for projects which use the @nrwl/node or @nrwl/web) and pointed it to a custom version of my webpack.config which looks like this

const WebpackNotifierPlugin = require('webpack-notifier');

module.exports = (config, context) => {
  console.log(config);
  return {
    ...config,
    plugins: [
      ...config.plugins,
      new WebpackNotifierPlugin({title: 'Project build completed'}),
    ]
  };
};

but I get the error when i try to build my project nx run frontend:build:

ERROR in ./main.tsx 4:16
Module parse failed: Unexpected token (4:16)
File was processed with these loaders:
 * ../../../node_modules/babel-loader/lib/index.js
You may need an additional loader to handle the result of these loaders.
| import ReactDOM from 'react-dom';
| import App from './app/app';
> ReactDOM.render(<App />, document.getElementById('root'));

Can I get some help with this? Is this the recommended way to override the webpack.config for a react based application?

Thanks

[niki4810]

I have got it working by requiring @nrwl/react/plugins/webpack.js and calling the config function with-in my custom webpack function:

const WebpackNotifierPlugin = require('webpack-notifier'); 
const nrwlConfig = require("@nrwl/react/plugins/webpack.js"); // require the main @nrwl/react/plugins/webpack configuration function.

module.exports = (config, context) => {
  nrwlConfig(config); // first call it so that it @nrwl/react plugin adds its configs, 
 
// then override your config.
  return {
    ...config,
    plugins: [
      ...config.plugins,
      new WebpackNotifierPlugin({title: 'Frontend Project build completed'}),
    ]
  };
};

Thanks to @cdaringe for the pointers.

[cbrwizard]

In my opinion, @niki4810’s solution should be added to official docs as it helped me to solve a nasty bug