This PR removes these from v20 since they were deprecated and slated for
removal:
- `executeWebpackDevServerBuilder` export from `@nx/angular/executors`,
users should use `executeDevServerBuilder`
- `withStylus` util from `@nx/next/plugins/with-stylus` since it was
deprecated in v17 and has just throw an error that users need to use
SASS with Next.js
The `getRollupOptions` function from `@nx/react/plugins/bundle-rollup`
has been deprecated as mention previously and slated for removal in v22.
New users are using inferred targets from Rollup, and existing projects
using this module should run `nx g @nx/rollup:convert-to-inferred` or
manually update rollup config to use `withNx` function.
Also, bumped some deprecation for later in v21:
- Remove inline builds from tsc/swc
- Changes to SVGR to align with Webpack v5 (e.g. `import ReactComponent
from './img.svg?svgr'`)
- Remove `isolatedConfig` from Webpack executor -- requires a migration
that extracts to a standard webpack config just in case (different from
the original one that extracts to `withNx`)
The ESLint TODOs were rescoped to `TODO(eslint)` and we'll look at it in
further flat config work rather than tying it to an Nx release.
<!-- If this is a particularly complex change or feature addition, you
can request a dedicated Nx release for this pull request branch. Mention
someone from the Nx team or the `@nrwl/nx-pipelines-reviewers` and they
will confirm if the PR warrants its own release for testing purposes,
and generate it for you if appropriate. -->
## Current Behavior
<!-- This is the behavior we have today -->
## Expected Behavior
<!-- This is the behavior we should expect with the changes in this PR
-->
## Related Issue(s)
<!-- Please link the issue being fixed so it gets closed when this is
merged. -->
Fixes #
## 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
