From cf165231c51d06c7524b454c3c8f63923603ce14 Mon Sep 17 00:00:00 2001 From: Nicholas Cunningham Date: Thu, 23 Jan 2025 11:56:10 -0700 Subject: [PATCH 1/2] fix(rspack): should be inferred by default --- e2e/react/src/react.test.ts | 1 - e2e/rspack/tests/rspack.spec.ts | 284 +++++++++++++++++- .../src/generators/application/application.ts | 3 - .../application/lib/bundlers/add-rspack.ts | 28 -- .../src/generators/application/application.ts | 3 - .../generators/configuration/configuration.ts | 3 - 6 files changed, 281 insertions(+), 41 deletions(-) diff --git a/e2e/react/src/react.test.ts b/e2e/react/src/react.test.ts index d1c7c79e7ca27f..9c31d8fc1529e4 100644 --- a/e2e/react/src/react.test.ts +++ b/e2e/react/src/react.test.ts @@ -8,7 +8,6 @@ import { listFiles, newProject, readFile, - readJson, runCLI, runCLIAsync, runE2ETests, diff --git a/e2e/rspack/tests/rspack.spec.ts b/e2e/rspack/tests/rspack.spec.ts index 732728605d35eb..be91b83defc7b9 100644 --- a/e2e/rspack/tests/rspack.spec.ts +++ b/e2e/rspack/tests/rspack.spec.ts @@ -9,8 +9,10 @@ import { updateFile, runCLI, runCommand, + createFile, + readJson, } from '@nx/e2e/utils'; -import { execSync } from 'child_process'; + import { writeFileSync } from 'fs'; import { join } from 'path'; @@ -24,12 +26,28 @@ describe('rspack e2e', () => { // on a unique project in the workspace, such that they // are not dependant on one another. beforeAll(() => { - proj = newProject({ packages: ['@nx/rspack'] }); + proj = newProject({ packages: ['@nx/rspack', '@nx/react'] }); }); afterAll(() => cleanupProject()); - it('should create rspack root project and additional apps', async () => { + it('should be inferred (crystal) by default', async () => { + const appName = uniq('app'); + + runCLI( + `generate @nx/react:application --directory=apps/${appName} --bundler=rspack --e2eTestRunner=none` + ); + + const nxJSON = readJson('nx.json'); + const rspackPlugin = nxJSON.plugins.find( + (plugin) => plugin.plugin === '@nx/rspack/plugin' + ); + + expect(rspackPlugin).toBeDefined(); + }); + + // This is disabled as the generator is no longer relevant + xit('should create rspack root project and additional apps', async () => { const project = uniq('myapp'); runCLI( `generate @nx/rspack:preset ${project} --framework=react --unitTestRunner=jest --e2eTestRunner=cypress --verbose` @@ -146,4 +164,264 @@ describe('rspack e2e', () => { // Make sure expected files are present. expect(listFiles(`dist/${app3}`)).toHaveLength(4); }, 200_000); + + describe('config types', () => { + it('should support a standard config object', () => { + const appName = uniq('app'); + + runCLI( + `generate @nx/react:application --directory=apps/${appName} --bundler=rspack --e2eTestRunner=none` + ); + + updateFile( + `apps/${appName}/rspack.config.js`, + ` + const { NxAppRspackPlugin } = require('@nx/rspack/app-plugin'); + const { NxReactRspackPlugin } = require('@nx/rspack/react-plugin'); + const { join } = require('path'); + + module.exports = { + output: { + path: join(__dirname, '../../dist/${appName}'), + }, + devServer: { + port: 4200, + historyApiFallback: { + index: '/index.html', + disableDotRule: true, + htmlAcceptHeaders: ['text/html', 'application/xhtml+xml'], + }, + }, + plugins: [ + new NxAppRspackPlugin({ + tsConfig: './tsconfig.app.json', + main: './src/main.tsx', + index: './src/index.html', + baseHref: '/', + assets: ['./src/favicon.ico', './src/assets'], + styles: ['./src/styles.scss'], + outputHashing: process.env['NODE_ENV'] === 'production' ? 'all' : 'none', + optimization: process.env['NODE_ENV'] === 'production', + }), + new NxReactRspackPlugin({ + // Uncomment this line if you don't want to use SVGR + // See: https://react-svgr.com/ + // svgr: false + }), + ], + };` + ); + + const result = runCLI(`build ${appName}`); + + expect(result).toContain( + `Successfully ran target build for project ${appName}` + ); + }); + + it('should support a standard function that returns a config object', () => { + const appName = uniq('app'); + + runCLI( + `generate @nx/react:application --directory=apps/${appName} --bundler=rspack --e2eTestRunner=none` + ); + + updateFile( + `apps/${appName}/rspack.config.js`, + ` + const { NxAppRspackPlugin } = require('@nx/rspack/app-plugin'); + const { NxReactRspackPlugin } = require('@nx/rspack/react-plugin'); + const { join } = require('path'); + + module.exports = () => { + return { + output: { + path: join(__dirname, '../../dist/${appName}'), + }, + devServer: { + port: 4200, + historyApiFallback: { + index: '/index.html', + disableDotRule: true, + htmlAcceptHeaders: ['text/html', 'application/xhtml+xml'], + }, + }, + plugins: [ + new NxAppRspackPlugin({ + tsConfig: './tsconfig.app.json', + main: './src/main.tsx', + index: './src/index.html', + baseHref: '/', + assets: ['./src/favicon.ico', './src/assets'], + styles: ['./src/styles.scss'], + outputHashing: process.env['NODE_ENV'] === 'production' ? 'all' : 'none', + optimization: process.env['NODE_ENV'] === 'production', + }), + new NxReactRspackPlugin({ + // Uncomment this line if you don't want to use SVGR + // See: https://react-svgr.com/ + // svgr: false + }), + ], + }; + };` + ); + + const result = runCLI(`build ${appName}`); + expect(result).toContain( + `Successfully ran target build for project ${appName}` + ); + }); + + it('should support an array of standard config objects', () => { + const appName = uniq('app'); + const serverName = uniq('server'); + + runCLI( + `generate @nx/react:application --directory=apps/${appName} --bundler=rspack --e2eTestRunner=none` + ); + + // Create server index file + createFile( + `apps/${serverName}/index.js`, + `console.log('Hello from ${serverName}');\n` + ); + + updateFile( + `apps/${appName}/rspack.config.js`, + ` + const { NxAppRspackPlugin } = require('@nx/rspack/app-plugin'); + const { NxReactRspackPlugin } = require('@nx/rspack/react-plugin'); + const { join } = require('path'); + + module.exports = [ + { + name: 'client', + output: { + path: join(__dirname, '../../dist/${appName}'), + }, + devServer: { + port: 4200, + historyApiFallback: { + index: '/index.html', + disableDotRule: true, + htmlAcceptHeaders: ['text/html', 'application/xhtml+xml'], + }, + }, + plugins: [ + new NxAppRspackPlugin({ + tsConfig: './tsconfig.app.json', + main: './src/main.tsx', + index: './src/index.html', + baseHref: '/', + assets: ['./src/favicon.ico', './src/assets'], + styles: ['./src/styles.scss'], + outputHashing: process.env['NODE_ENV'] === 'production' ? 'all' : 'none', + optimization: process.env['NODE_ENV'] === 'production', + }), + new NxReactRspackPlugin({ + // Uncomment this line if you don't want to use SVGR + // See: https://react-svgr.com/ + // svgr: false + }), + ], + }, { + name: 'server', + target: 'node', + entry: '../${serverName}/index.js', + output: { + path: join(__dirname, '../../dist/${serverName}'), + filename: 'index.js', + }, + } + ]; + ` + ); + + const result = runCLI(`build ${appName}`); + + checkFilesExist(`dist/${appName}/main.js`); + checkFilesExist(`dist/${serverName}/index.js`); + + expect(result).toContain( + `Successfully ran target build for project ${appName}` + ); + }); + + it('should support a function that returns an array of standard config objects', () => { + const appName = uniq('app'); + const serverName = uniq('server'); + + runCLI( + `generate @nx/react:application --directory=apps/${appName} --bundler=rspack --e2eTestRunner=none` + ); + + // Create server index file + createFile( + `apps/${serverName}/index.js`, + `console.log('Hello from ${serverName}');\n` + ); + + updateFile( + `apps/${appName}/rspack.config.js`, + ` + const { NxAppRspackPlugin } = require('@nx/rspack/app-plugin'); + const { NxReactRspackPlugin } = require('@nx/rspack/react-plugin'); + const { join } = require('path'); + + module.exports = () => { + return [ + { + name: 'client', + output: { + path: join(__dirname, '../../dist/${appName}'), + }, + devServer: { + port: 4200, + historyApiFallback: { + index: '/index.html', + disableDotRule: true, + htmlAcceptHeaders: ['text/html', 'application/xhtml+xml'], + }, + }, + plugins: [ + new NxAppRspackPlugin({ + tsConfig: './tsconfig.app.json', + main: './src/main.tsx', + index: './src/index.html', + baseHref: '/', + assets: ['./src/favicon.ico', './src/assets'], + styles: ['./src/styles.scss'], + outputHashing: process.env['NODE_ENV'] === 'production' ? 'all' : 'none', + optimization: process.env['NODE_ENV'] === 'production', + }), + new NxReactRspackPlugin({ + // Uncomment this line if you don't want to use SVGR + // See: https://react-svgr.com/ + // svgr: false + }), + ], + }, + { + name: 'server', + target: 'node', + entry: '../${serverName}/index.js', + output: { + path: join(__dirname, '../../dist/${serverName}'), + filename: 'index.js', + } + } + ]; + };` + ); + const result = runCLI(`build ${appName}`); + + checkFilesExist(`dist/${serverName}/index.js`); + checkFilesExist(`dist/${appName}/main.js`); + + expect(result).toContain( + `Successfully ran target build for project ${appName}` + ); + }); + }); }); diff --git a/packages/react/src/generators/application/application.ts b/packages/react/src/generators/application/application.ts index bc882e80d76be2..363d624dc83c1e 100644 --- a/packages/react/src/generators/application/application.ts +++ b/packages/react/src/generators/application/application.ts @@ -32,7 +32,6 @@ import { initWebpack } from './lib/bundlers/add-webpack'; import { handleStyledJsxForRspack, initRspack, - setupRspackConfiguration, } from './lib/bundlers/add-rspack'; import { initRsbuild, @@ -125,8 +124,6 @@ export async function applicationGeneratorInternal( if (options.bundler === 'vite') { await setupViteConfiguration(tree, options, tasks); - } else if (options.bundler === 'rspack') { - await setupRspackConfiguration(tree, options, tasks); } else if (options.bundler === 'rsbuild') { await setupRsbuildConfiguration(tree, options, tasks); } diff --git a/packages/react/src/generators/application/lib/bundlers/add-rspack.ts b/packages/react/src/generators/application/lib/bundlers/add-rspack.ts index 99dd20d4b6c2b8..943f3f19fb3f08 100644 --- a/packages/react/src/generators/application/lib/bundlers/add-rspack.ts +++ b/packages/react/src/generators/application/lib/bundlers/add-rspack.ts @@ -8,7 +8,6 @@ import { } from '@nx/devkit'; import * as pc from 'picocolors'; import { babelLoaderVersion, nxVersion } from '../../../../utils/versions'; -import { maybeJs } from '../../../../utils/maybe-js'; import { NormalizedSchema, Schema } from '../../schema'; export async function initRspack( @@ -19,38 +18,11 @@ export async function initRspack( const { rspackInitGenerator } = ensurePackage('@nx/rspack', nxVersion); const rspackInitTask = await rspackInitGenerator(tree, { ...options, - addPlugin: false, skipFormat: true, }); tasks.push(rspackInitTask); } -export async function setupRspackConfiguration( - tree: Tree, - options: NormalizedSchema, - tasks: any[] -) { - const { configurationGenerator } = ensurePackage('@nx/rspack', nxVersion); - const rspackTask = await configurationGenerator(tree, { - project: options.projectName, - main: joinPathFragments( - options.appProjectRoot, - maybeJs( - { - js: options.js, - useJsx: true, - }, - `src/main.tsx` - ) - ), - tsConfig: joinPathFragments(options.appProjectRoot, 'tsconfig.app.json'), - target: 'web', - newProject: true, - framework: 'react', - }); - tasks.push(rspackTask); -} - export function handleStyledJsxForRspack( tasks: any[], tree: Tree, diff --git a/packages/rspack/src/generators/application/application.ts b/packages/rspack/src/generators/application/application.ts index 77ae88c8680b60..54b685f852f871 100644 --- a/packages/rspack/src/generators/application/application.ts +++ b/packages/rspack/src/generators/application/application.ts @@ -12,9 +12,6 @@ export default async function ( const tasks = []; const initTask = await rspackInitGenerator(tree, { ..._options, - // TODO: Crystalize the default rspack.config.js file. - // The default setup isn't crystalized so don't add plugin. - addPlugin: false, }); tasks.push(initTask); diff --git a/packages/rspack/src/generators/configuration/configuration.ts b/packages/rspack/src/generators/configuration/configuration.ts index 22d938eaae0a7d..6976bf5e1751ae 100644 --- a/packages/rspack/src/generators/configuration/configuration.ts +++ b/packages/rspack/src/generators/configuration/configuration.ts @@ -28,9 +28,6 @@ export async function configurationGenerator( ) { const task = await rspackInitGenerator(tree, { ...options, - // TODO: Crystalize the default rspack.config.js file. - // The default setup isn't crystalized so don't add plugin. - addPlugin: false, }); const { targets, root, projectType } = readProjectConfiguration( tree, From e6d42c3c476970403d40372c60dd67c53ea3de8e Mon Sep 17 00:00:00 2001 From: Nicholas Cunningham Date: Tue, 11 Feb 2025 10:21:28 -0700 Subject: [PATCH 2/2] fix(rspack): Add e2e for rspack executor --- e2e/rspack/tests/rspack.legacy.spec.ts | 121 +++++ e2e/rspack/tests/rspack.spec.ts | 446 +++++++----------- .../application/application.spec.ts | 2 +- 3 files changed, 282 insertions(+), 287 deletions(-) create mode 100644 e2e/rspack/tests/rspack.legacy.spec.ts diff --git a/e2e/rspack/tests/rspack.legacy.spec.ts b/e2e/rspack/tests/rspack.legacy.spec.ts new file mode 100644 index 00000000000000..0d613b2b518d94 --- /dev/null +++ b/e2e/rspack/tests/rspack.legacy.spec.ts @@ -0,0 +1,121 @@ +import { + cleanupProject, + newProject, + uniq, + updateFile, + runCLI, + updateJson, +} from '@nx/e2e/utils'; + +describe('rspack e2e legacy', () => { + let originalEnv; + + // Setting up individual workspaces per + // test can cause e2e runs to take a long time. + // For this reason, we recommend each suite only + // consumes 1 workspace. The tests should each operate + // on a unique project in the workspace, such that they + // are not dependant on one another. + beforeAll(() => { + newProject({ packages: ['@nx/rspack', '@nx/react'] }); + originalEnv = process.env.NODE_ENV; + }); + afterAll(() => { + process.env.NODE_ENV = originalEnv; + cleanupProject(); + }); + + it('should support a standard config object', () => { + const appName = uniq('non-inferred-app'); + + runCLI( + `generate @nx/react:app --directory=apps/${appName} --bundler=rspack --e2eTestRunner=none`, + { env: { NX_ADD_PLUGINS: 'false' } } + ); + + updateJson(`apps/${appName}/project.json`, (json) => { + json.targets.build.options.standardRspackConfigFunction = true; + return json; + }); + + updateFile( + `apps/${appName}/rspack.config.js`, + ` + const { NxAppRspackPlugin } = require('@nx/rspack/app-plugin'); + const { NxReactRspackPlugin } = require('@nx/rspack/react-plugin'); + const { join } = require('path'); + + module.exports = { + output: { + path: join(__dirname, '../../dist/${appName}'), + }, + devServer: { + port: 4200, + historyApiFallback: { + index: '/index.html', + disableDotRule: true, + htmlAcceptHeaders: ['text/html', 'application/xhtml+xml'], + }, + }, + plugins: [ + new NxAppRspackPlugin({ + tsConfig: './tsconfig.app.json', + main: './src/main.tsx', + index: './src/index.html', + baseHref: '/', + assets: ['./src/favicon.ico', './src/assets'], + styles: ['./src/styles.scss'], + outputHashing: process.env['NODE_ENV'] === 'production' ? 'all' : 'none', + optimization: process.env['NODE_ENV'] === 'production', + }), + new NxReactRspackPlugin({ + // Uncomment this line if you don't want to use SVGR + // See: https://react-svgr.com/ + // svgr: false + }), + ], + };` + ); + + const result = runCLI(`build ${appName}`); + + expect(result).toContain( + `Successfully ran target build for project ${appName}` + ); + }); + + it('should support Nx config function that returns a config object', () => { + const appName = uniq('non-inferred-app'); + + runCLI( + `generate @nx/react:application --directory=apps/${appName} --bundler=rspack --e2eTestRunner=none --style=css --no-interactive`, + { env: { NX_ADD_PLUGINS: 'false' } } + ); + + updateFile( + `apps/${appName}/rspack.config.js`, + ` + const { composePlugins, withNx, withReact } = require('@nx/rspack'); + + // Nx plugins for rspack. + module.exports = composePlugins( + withNx(), + withReact({ + // Uncomment this line if you don't want to use SVGR + // See: https://react-svgr.com/ + // svgr: false + }), + (config) => { + // Update the rspack config as needed here. + return config; + } + );` + ); + + const result = runCLI(`build ${appName}`); + + expect(result).toContain( + `Successfully ran target build for project ${appName}` + ); + }); +}); diff --git a/e2e/rspack/tests/rspack.spec.ts b/e2e/rspack/tests/rspack.spec.ts index be91b83defc7b9..d97b61b8146411 100644 --- a/e2e/rspack/tests/rspack.spec.ts +++ b/e2e/rspack/tests/rspack.spec.ts @@ -1,21 +1,15 @@ -import { getPackageManagerCommand } from '@nx/devkit'; import { checkFilesExist, cleanupProject, - listFiles, newProject, - tmpProjPath, uniq, updateFile, runCLI, - runCommand, createFile, readJson, + updateJson, } from '@nx/e2e/utils'; -import { writeFileSync } from 'fs'; -import { join } from 'path'; - describe('rspack e2e', () => { let proj: string; @@ -28,7 +22,6 @@ describe('rspack e2e', () => { beforeAll(() => { proj = newProject({ packages: ['@nx/rspack', '@nx/react'] }); }); - afterAll(() => cleanupProject()); it('should be inferred (crystal) by default', async () => { @@ -46,125 +39,6 @@ describe('rspack e2e', () => { expect(rspackPlugin).toBeDefined(); }); - // This is disabled as the generator is no longer relevant - xit('should create rspack root project and additional apps', async () => { - const project = uniq('myapp'); - runCLI( - `generate @nx/rspack:preset ${project} --framework=react --unitTestRunner=jest --e2eTestRunner=cypress --verbose` - ); - - // Added this so that the nx-ecosystem-ci tests don't throw jest error - writeFileSync( - join(tmpProjPath(), '.babelrc'), - ` - { - "presets": [ - "@babel/preset-env", "@babel/preset-react", "@babel/preset-typescript", - [ - "@nx/react/babel", - { - "runtime": "automatic" - } - ] - ], - "plugins": ["@babel/plugin-transform-runtime"] - } - ` - ); - - const pm = getPackageManagerCommand(); - runCommand( - pm.addDev + - ' @babel/preset-react @babel/preset-env @babel/preset-typescript' - ); - - let result = runCLI(`build ${project}`, { - env: { NODE_ENV: 'production' }, - }); - expect(result).toContain('Successfully ran target build'); - // Make sure expected files are present. - /** - * The files that are generated are: - * ["assets", "favicon.ico", "index.html", "main.bf7851e6.js", "runtime.e4294127.js"] - */ - expect(listFiles(`dist/${project}`)).toHaveLength(5); - - result = runCLI(`test ${project}`); - expect(result).toContain('Successfully ran target test'); - - // TODO(Colum): re-enable when cypress issue is resolved - // result = runCLI(`e2e e2e`); - // expect(result.stdout).toContain('Successfully ran target e2e'); - - // Update app and make sure previous dist files are not present. - updateFile(`src/app/app.tsx`, (content) => { - return `${content}\nconsole.log('hello'); - `; - }); - result = runCLI(`build ${project}`, { - env: { NODE_ENV: 'production' }, - }); - expect(result).toContain('Successfully ran target build'); - expect(listFiles(`dist/${project}`)).toHaveLength(5); // same length as before - - // Generate a new app and check that the files are correct - const app2 = uniq('app2'); - runCLI( - `generate @nx/rspack:app ${app2} --framework=react --unitTestRunner=jest --e2eTestRunner=cypress --style=css` - ); - checkFilesExist(`${app2}/project.json`, `${app2}-e2e/project.json`); - - // Added this so that the nx-ecosystem-ci tests don't throw jest error - writeFileSync( - join(tmpProjPath(), app2, '.babelrc'), - ` - { - "presets": [ - "@babel/preset-env", "@babel/preset-react", "@babel/preset-typescript", - [ - "@nx/react/babel", - { - "runtime": "automatic" - } - ] - ], - "plugins": ["@babel/plugin-transform-runtime"] - } - ` - ); - - result = runCLI(`build ${app2}`, { - env: { NODE_ENV: 'production' }, - }); - expect(result).toContain('Successfully ran target build'); - // Make sure expected files are present. - expect(listFiles(`dist/${app2}`)).toHaveLength(5); - - result = runCLI(`test ${app2}`); - expect(result).toContain('Successfully ran target test'); - - // TODO(Colum): re-enable when cypress issue is resolved - // result = runCLI(`e2e ${app2}-e2e`); - // expect(result.stdout).toContain('Successfully ran target e2e'); - - // Generate a Nest app and verify build output - const app3 = uniq('app3'); - runCLI( - `generate @nx/rspack:app ${app3} --framework=nest --unitTestRunner=jest --no-interactive` - ); - checkFilesExist(`${app3}/project.json`); - - result = runCLI(`build ${app3}`); - expect(result).toContain('Successfully ran target build'); - // Make sure expected files are present. - expect(listFiles(`dist/${app3}`)).toHaveLength(2); - - result = runCLI(`build ${app3} --generatePackageJson=true`); - expect(result).toContain('Successfully ran target build'); - // Make sure expected files are present. - expect(listFiles(`dist/${app3}`)).toHaveLength(4); - }, 200_000); - describe('config types', () => { it('should support a standard config object', () => { const appName = uniq('app'); @@ -176,40 +50,40 @@ describe('rspack e2e', () => { updateFile( `apps/${appName}/rspack.config.js`, ` - const { NxAppRspackPlugin } = require('@nx/rspack/app-plugin'); - const { NxReactRspackPlugin } = require('@nx/rspack/react-plugin'); - const { join } = require('path'); - - module.exports = { - output: { - path: join(__dirname, '../../dist/${appName}'), - }, - devServer: { - port: 4200, - historyApiFallback: { - index: '/index.html', - disableDotRule: true, - htmlAcceptHeaders: ['text/html', 'application/xhtml+xml'], + const { NxAppRspackPlugin } = require('@nx/rspack/app-plugin'); + const { NxReactRspackPlugin } = require('@nx/rspack/react-plugin'); + const { join } = require('path'); + + module.exports = { + output: { + path: join(__dirname, '../../dist/${appName}'), }, - }, - plugins: [ - new NxAppRspackPlugin({ - tsConfig: './tsconfig.app.json', - main: './src/main.tsx', - index: './src/index.html', - baseHref: '/', - assets: ['./src/favicon.ico', './src/assets'], - styles: ['./src/styles.scss'], - outputHashing: process.env['NODE_ENV'] === 'production' ? 'all' : 'none', - optimization: process.env['NODE_ENV'] === 'production', - }), - new NxReactRspackPlugin({ - // Uncomment this line if you don't want to use SVGR - // See: https://react-svgr.com/ - // svgr: false - }), - ], - };` + devServer: { + port: 4200, + historyApiFallback: { + index: '/index.html', + disableDotRule: true, + htmlAcceptHeaders: ['text/html', 'application/xhtml+xml'], + }, + }, + plugins: [ + new NxAppRspackPlugin({ + tsConfig: './tsconfig.app.json', + main: './src/main.tsx', + index: './src/index.html', + baseHref: '/', + assets: ['./src/favicon.ico', './src/assets'], + styles: ['./src/styles.scss'], + outputHashing: process.env['NODE_ENV'] === 'production' ? 'all' : 'none', + optimization: process.env['NODE_ENV'] === 'production', + }), + new NxReactRspackPlugin({ + // Uncomment this line if you don't want to use SVGR + // See: https://react-svgr.com/ + // svgr: false + }), + ], + };` ); const result = runCLI(`build ${appName}`); @@ -229,42 +103,42 @@ describe('rspack e2e', () => { updateFile( `apps/${appName}/rspack.config.js`, ` - const { NxAppRspackPlugin } = require('@nx/rspack/app-plugin'); - const { NxReactRspackPlugin } = require('@nx/rspack/react-plugin'); - const { join } = require('path'); - - module.exports = () => { - return { - output: { - path: join(__dirname, '../../dist/${appName}'), - }, - devServer: { - port: 4200, - historyApiFallback: { - index: '/index.html', - disableDotRule: true, - htmlAcceptHeaders: ['text/html', 'application/xhtml+xml'], + const { NxAppRspackPlugin } = require('@nx/rspack/app-plugin'); + const { NxReactRspackPlugin } = require('@nx/rspack/react-plugin'); + const { join } = require('path'); + + module.exports = () => { + return { + output: { + path: join(__dirname, '../../dist/${appName}'), + }, + devServer: { + port: 4200, + historyApiFallback: { + index: '/index.html', + disableDotRule: true, + htmlAcceptHeaders: ['text/html', 'application/xhtml+xml'], + }, }, - }, - plugins: [ - new NxAppRspackPlugin({ - tsConfig: './tsconfig.app.json', - main: './src/main.tsx', - index: './src/index.html', - baseHref: '/', - assets: ['./src/favicon.ico', './src/assets'], - styles: ['./src/styles.scss'], - outputHashing: process.env['NODE_ENV'] === 'production' ? 'all' : 'none', - optimization: process.env['NODE_ENV'] === 'production', - }), - new NxReactRspackPlugin({ - // Uncomment this line if you don't want to use SVGR - // See: https://react-svgr.com/ - // svgr: false - }), - ], - }; - };` + plugins: [ + new NxAppRspackPlugin({ + tsConfig: './tsconfig.app.json', + main: './src/main.tsx', + index: './src/index.html', + baseHref: '/', + assets: ['./src/favicon.ico', './src/assets'], + styles: ['./src/styles.scss'], + outputHashing: process.env['NODE_ENV'] === 'production' ? 'all' : 'none', + optimization: process.env['NODE_ENV'] === 'production', + }), + new NxReactRspackPlugin({ + // Uncomment this line if you don't want to use SVGR + // See: https://react-svgr.com/ + // svgr: false + }), + ], + }; + };` ); const result = runCLI(`build ${appName}`); @@ -290,52 +164,52 @@ describe('rspack e2e', () => { updateFile( `apps/${appName}/rspack.config.js`, ` - const { NxAppRspackPlugin } = require('@nx/rspack/app-plugin'); - const { NxReactRspackPlugin } = require('@nx/rspack/react-plugin'); - const { join } = require('path'); - - module.exports = [ - { - name: 'client', - output: { - path: join(__dirname, '../../dist/${appName}'), - }, - devServer: { - port: 4200, - historyApiFallback: { - index: '/index.html', - disableDotRule: true, - htmlAcceptHeaders: ['text/html', 'application/xhtml+xml'], + const { NxAppRspackPlugin } = require('@nx/rspack/app-plugin'); + const { NxReactRspackPlugin } = require('@nx/rspack/react-plugin'); + const { join } = require('path'); + + module.exports = [ + { + name: 'client', + output: { + path: join(__dirname, '../../dist/${appName}'), + }, + devServer: { + port: 4200, + historyApiFallback: { + index: '/index.html', + disableDotRule: true, + htmlAcceptHeaders: ['text/html', 'application/xhtml+xml'], + }, }, - }, - plugins: [ - new NxAppRspackPlugin({ - tsConfig: './tsconfig.app.json', - main: './src/main.tsx', - index: './src/index.html', - baseHref: '/', - assets: ['./src/favicon.ico', './src/assets'], - styles: ['./src/styles.scss'], - outputHashing: process.env['NODE_ENV'] === 'production' ? 'all' : 'none', - optimization: process.env['NODE_ENV'] === 'production', - }), - new NxReactRspackPlugin({ - // Uncomment this line if you don't want to use SVGR - // See: https://react-svgr.com/ - // svgr: false - }), - ], - }, { - name: 'server', - target: 'node', - entry: '../${serverName}/index.js', - output: { - path: join(__dirname, '../../dist/${serverName}'), - filename: 'index.js', - }, - } - ]; - ` + plugins: [ + new NxAppRspackPlugin({ + tsConfig: './tsconfig.app.json', + main: './src/main.tsx', + index: './src/index.html', + baseHref: '/', + assets: ['./src/favicon.ico', './src/assets'], + styles: ['./src/styles.scss'], + outputHashing: process.env['NODE_ENV'] === 'production' ? 'all' : 'none', + optimization: process.env['NODE_ENV'] === 'production', + }), + new NxReactRspackPlugin({ + // Uncomment this line if you don't want to use SVGR + // See: https://react-svgr.com/ + // svgr: false + }), + ], + }, { + name: 'server', + target: 'node', + entry: '../${serverName}/index.js', + output: { + path: join(__dirname, '../../dist/${serverName}'), + filename: 'index.js', + }, + } + ]; + ` ); const result = runCLI(`build ${appName}`); @@ -365,54 +239,54 @@ describe('rspack e2e', () => { updateFile( `apps/${appName}/rspack.config.js`, ` - const { NxAppRspackPlugin } = require('@nx/rspack/app-plugin'); - const { NxReactRspackPlugin } = require('@nx/rspack/react-plugin'); - const { join } = require('path'); - - module.exports = () => { - return [ - { - name: 'client', - output: { - path: join(__dirname, '../../dist/${appName}'), - }, - devServer: { - port: 4200, - historyApiFallback: { - index: '/index.html', - disableDotRule: true, - htmlAcceptHeaders: ['text/html', 'application/xhtml+xml'], + const { NxAppRspackPlugin } = require('@nx/rspack/app-plugin'); + const { NxReactRspackPlugin } = require('@nx/rspack/react-plugin'); + const { join } = require('path'); + + module.exports = () => { + return [ + { + name: 'client', + output: { + path: join(__dirname, '../../dist/${appName}'), + }, + devServer: { + port: 4200, + historyApiFallback: { + index: '/index.html', + disableDotRule: true, + htmlAcceptHeaders: ['text/html', 'application/xhtml+xml'], + }, }, - }, - plugins: [ - new NxAppRspackPlugin({ - tsConfig: './tsconfig.app.json', - main: './src/main.tsx', - index: './src/index.html', - baseHref: '/', - assets: ['./src/favicon.ico', './src/assets'], - styles: ['./src/styles.scss'], - outputHashing: process.env['NODE_ENV'] === 'production' ? 'all' : 'none', - optimization: process.env['NODE_ENV'] === 'production', - }), - new NxReactRspackPlugin({ - // Uncomment this line if you don't want to use SVGR - // See: https://react-svgr.com/ - // svgr: false - }), - ], - }, - { - name: 'server', - target: 'node', - entry: '../${serverName}/index.js', - output: { - path: join(__dirname, '../../dist/${serverName}'), - filename: 'index.js', + plugins: [ + new NxAppRspackPlugin({ + tsConfig: './tsconfig.app.json', + main: './src/main.tsx', + index: './src/index.html', + baseHref: '/', + assets: ['./src/favicon.ico', './src/assets'], + styles: ['./src/styles.scss'], + outputHashing: process.env['NODE_ENV'] === 'production' ? 'all' : 'none', + optimization: process.env['NODE_ENV'] === 'production', + }), + new NxReactRspackPlugin({ + // Uncomment this line if you don't want to use SVGR + // See: https://react-svgr.com/ + // svgr: false + }), + ], + }, + { + name: 'server', + target: 'node', + entry: '../${serverName}/index.js', + output: { + path: join(__dirname, '../../dist/${serverName}'), + filename: 'index.js', + } } - } - ]; - };` + ]; + };` ); const result = runCLI(`build ${appName}`); diff --git a/packages/react/src/generators/application/application.spec.ts b/packages/react/src/generators/application/application.spec.ts index 67dee489939fa2..76d6aa2888cfab 100644 --- a/packages/react/src/generators/application/application.spec.ts +++ b/packages/react/src/generators/application/application.spec.ts @@ -1632,7 +1632,7 @@ describe('app', () => { linter: Linter.EsLint, style: 'none', e2eTestRunner: 'none', - addPlugin: true, + addPlugin: false, skipFormat: true, });