81892b51fd
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 #
109 lines
3.2 KiB
TypeScript
109 lines
3.2 KiB
TypeScript
import { Configuration, WebpackOptionsNormalized } from 'webpack';
|
|
import { SvgrOptions } from '../../with-react';
|
|
|
|
export function applyReactConfig(
|
|
options: { svgr?: boolean | SvgrOptions },
|
|
config: Partial<WebpackOptionsNormalized | Configuration> = {}
|
|
): void {
|
|
if (!process.env['NX_TASK_TARGET_PROJECT']) return;
|
|
|
|
addHotReload(config);
|
|
|
|
if (options.svgr !== false || typeof options.svgr === 'object') {
|
|
removeSvgLoaderIfPresent(config);
|
|
|
|
const defaultSvgrOptions = {
|
|
svgo: false,
|
|
titleProp: true,
|
|
ref: true,
|
|
};
|
|
|
|
const svgrOptions =
|
|
typeof options.svgr === 'object' ? options.svgr : defaultSvgrOptions;
|
|
|
|
// TODO(v21): Remove file-loader and use `?react` querystring to differentiate between asset and SVGR.
|
|
// It should be:
|
|
// use: [{
|
|
// test: /\.svg$/i,
|
|
// type: 'asset',
|
|
// resourceQuery: /react/, // *.svg?react
|
|
// },
|
|
// {
|
|
// test: /\.svg$/i,
|
|
// issuer: /\.[jt]sx?$/,
|
|
// resourceQuery: { not: [/react/] }, // exclude react component if *.svg?react
|
|
// use: ['@svgr/webpack'],
|
|
// }],
|
|
// See:
|
|
// - SVGR: https://react-svgr.com/docs/webpack/#use-svgr-and-asset-svg-in-the-same-project
|
|
// - Vite: https://www.npmjs.com/package/vite-plugin-svgr
|
|
// - Rsbuild: https://github.com/web-infra-dev/rsbuild/pull/1783
|
|
// Note: We also need a migration for any projects that are using SVGR to convert
|
|
// `import { ReactComponent as X } from './x.svg` to
|
|
// `import X from './x.svg?react';
|
|
config.module.rules.push({
|
|
test: /\.svg$/,
|
|
issuer: /\.(js|ts|md)x?$/,
|
|
use: [
|
|
{
|
|
loader: require.resolve('@svgr/webpack'),
|
|
options: svgrOptions,
|
|
},
|
|
{
|
|
loader: require.resolve('file-loader'),
|
|
options: {
|
|
name: '[name].[hash].[ext]',
|
|
},
|
|
},
|
|
],
|
|
});
|
|
}
|
|
|
|
// enable webpack node api
|
|
config.node = {
|
|
__dirname: true,
|
|
__filename: true,
|
|
};
|
|
}
|
|
|
|
function addHotReload(
|
|
config: Partial<WebpackOptionsNormalized | Configuration>
|
|
) {
|
|
if (config.mode === 'development' && config['devServer']?.hot) {
|
|
// add `react-refresh/babel` to babel loader plugin
|
|
const babelLoader = config.module.rules.find(
|
|
(rule) =>
|
|
rule &&
|
|
typeof rule !== 'string' &&
|
|
rule.loader?.toString().includes('babel-loader')
|
|
);
|
|
|
|
if (babelLoader && typeof babelLoader !== 'string') {
|
|
babelLoader.options['plugins'] = [
|
|
...(babelLoader.options['plugins'] || []),
|
|
[
|
|
require.resolve('react-refresh/babel'),
|
|
{
|
|
skipEnvCheck: true,
|
|
},
|
|
],
|
|
];
|
|
}
|
|
|
|
const ReactRefreshPlugin = require('@pmmmwh/react-refresh-webpack-plugin');
|
|
config.plugins.push(new ReactRefreshPlugin({ overlay: false }));
|
|
}
|
|
}
|
|
|
|
// We remove potentially conflicting rules that target SVGs because we use @svgr/webpack loader
|
|
// See https://github.com/nrwl/nx/issues/14383
|
|
function removeSvgLoaderIfPresent(
|
|
config: Partial<WebpackOptionsNormalized | Configuration>
|
|
) {
|
|
const svgLoaderIdx = config.module.rules.findIndex(
|
|
(rule) => typeof rule === 'object' && rule.test.toString().includes('svg')
|
|
);
|
|
if (svgLoaderIdx === -1) return;
|
|
config.module.rules.splice(svgLoaderIdx, 1);
|
|
}
|