## Current Behavior
Currently when a user runs into a compile/runtime error in react
application 2 error overlays will show. One from react-refresh-plugin
and the second one from webpack-dev-server (which is enabled by default)
### Steps to reproduce
This is reproducible using both webpack config types when the react
refresh plugin is applied to the configuration.
1. create fresh nx react app with webpack
2. add `hot: true`in webpack dev server configuration, so
react-refresh-plugin gets applied
3. anywhere in the app code throw an error i.e.
```
useEffect(() => {
setTimeout(() => {
throw new Error('test');
}, 1000);
}, []);
```
4. observe 2 error overlays shown
Or clone the repo https://github.com/zoran995/nx-react-error-overlay,
branch main is using nx enhanced config, branch default-config is using
plain webpack config. Here is also a codesandbox showcasing an issue
https://codesandbox.io/p/github/zoran995/nx-react-error-overlay/main?file=%2Fapps%2Forg%2Fsrc%2Fapp%2Fapp.tsx&import=true
## Expected Behavior
Only one error should be shown to the user, and this is the actual
configuration of the plugin that is used by react scripts. I went with
not exposing another config option for nx react webpack plugin as there
is already an option to configure webpack dev server error overlay and
most of the react community is used to have the react-refresh one
disabled.
This PR adds the ability to now override our svg options by providing
them either using `NxReactWebpackPlugin` for react apps or `withNx` for
Next.js apps
```
new NxReactWebpackPlugin({
svgr: {
svgo: true,
titleProp: true,
ref: true,
}
}),
```
This now gives you control on customizing how the svg is handled. Should you need to enable svgo you can provide the config using `svgr.config.js`
https://react-svgr.com/docs/options/#svgocloses: #9487
