diff --git a/e2e/react/src/react.test.ts b/e2e/react/src/react.test.ts index c877b86a44..043bf20b1f 100644 --- a/e2e/react/src/react.test.ts +++ b/e2e/react/src/react.test.ts @@ -68,6 +68,8 @@ describe('React Applications', () => { const libName = uniq('lib'); const libWithNoComponents = uniq('lib'); const logoSvg = readFileSync(join(__dirname, 'logo.svg')).toString(); + const blueSvg = ``; + const redSvg = ``; runCLI( `generate @nx/react:app ${appName} --style=css --bundler=webpack --no-interactive --skipFormat` @@ -92,11 +94,15 @@ describe('React Applications', () => { ` ); + updateFile(`apps/${appName}/src/app/blue/img.svg`, blueSvg); // ensure that same filenames do not conflict + updateFile(`apps/${appName}/src/app/red/img.svg`, redSvg); // ensure that same filenames do not conflict updateFile(`apps/${appName}/src/app/logo.svg`, logoSvg); updateFile( `apps/${appName}/src/app/app.tsx`, ` import { ReactComponent as Logo } from './logo.svg'; + import blue from './blue/img.svg'; + import red from './red/img.svg'; import logo from './logo.svg'; import NxWelcome from './nx-welcome'; @@ -105,6 +111,8 @@ describe('React Applications', () => { <> + + ); @@ -134,10 +142,7 @@ describe('React Applications', () => { checkSourceMap: true, checkStyles: true, checkLinter: true, - // TODO(caleb): Fix cypress tests - // /tmp/nx-e2e--1970-rQ4U0qBe6Nht/nx/proj1614306/dist/apps/app5172641/server/runtime.js:119 - // if (typeof import.meta.url === "string") scriptUrl = import.meta.url - // SyntaxError: Cannot use 'import.meta' outside a module + // TODO(jack): check why Playwright tests are timing out in CI checkE2E: false, }); @@ -150,13 +155,10 @@ describe('React Applications', () => { checkSourceMap: false, checkStyles: false, checkLinter: false, - // TODO(caleb): Fix cypress tests - // /tmp/nx-e2e--1970-rQ4U0qBe6Nht/nx/proj1614306/dist/apps/app5172641/server/runtime.js:119 - // if (typeof import.meta.url === "string") scriptUrl = import.meta.url - // SyntaxError: Cannot use 'import.meta' outside a module + // TODO(jack): check why Playwright tests are timing out in CI checkE2E: false, }); - }, 500000); + }, 500_000); it('should generate app with routing', async () => { const appName = uniq('app'); @@ -532,7 +534,7 @@ async function testGeneratedApp( if (opts.checkE2E && runE2ETests()) { const e2eResults = runCLI(`e2e ${appName}-e2e`); - expect(e2eResults).toContain('All specs passed!'); + expect(e2eResults).toContain('Successfully ran target e2e'); expect(await killPorts()).toBeTruthy(); } } diff --git a/e2e/web/src/web.test.ts b/e2e/web/src/web.test.ts index 46f1910b24..65dc1da459 100644 --- a/e2e/web/src/web.test.ts +++ b/e2e/web/src/web.test.ts @@ -5,6 +5,7 @@ import { createFile, isNotWindows, killPorts, + listFiles, newProject, readFile, runCLI, @@ -79,22 +80,27 @@ describe('Web Components Applications', () => { 'none' ); runCLI(`build ${appName}`); + const images = listFiles(`dist/apps/${appName}`).filter((f) => + f.endsWith('.png') + ); checkFilesExist( `dist/apps/${appName}/index.html`, `dist/apps/${appName}/runtime.js`, - `dist/apps/${appName}/emitted.png`, `dist/apps/${appName}/main.js`, `dist/apps/${appName}/styles.css` ); - checkFilesDoNotExist(`dist/apps/${appName}/inlined.png`); + expect(images.some((f) => f.startsWith('emitted.'))).toBe(true); + expect(images.some((f) => f.startsWith('inlined.'))).toBe(false); expect(readFile(`dist/apps/${appName}/main.js`)).toContain( 'data:image/png;base64' ); // Should not be a JS module but kept as a PNG - expect(readFile(`dist/apps/${appName}/emitted.png`)).not.toContain( - 'export default' - ); + expect( + readFile( + `dist/apps/${appName}/${images.find((f) => f.startsWith('emitted.'))}` + ) + ).not.toContain('export default'); expect(readFile(`dist/apps/${appName}/index.html`)).toContain( '' diff --git a/packages/webpack/src/plugins/nx-webpack-plugin/lib/apply-web-config.ts b/packages/webpack/src/plugins/nx-webpack-plugin/lib/apply-web-config.ts index 5dc11e9671..33a6e11d8f 100644 --- a/packages/webpack/src/plugins/nx-webpack-plugin/lib/apply-web-config.ts +++ b/packages/webpack/src/plugins/nx-webpack-plugin/lib/apply-web-config.ts @@ -332,6 +332,7 @@ export function applyWebConfig( config.output = { ...config.output, + assetModuleFilename: '[name].[contenthash:20][ext]', crossOriginLoading: options.subresourceIntegrity ? ('anonymous' as const) : (false as const), @@ -404,9 +405,6 @@ export function applyWebConfig( maxSize: 10_000, // 10 kB }, }, - generator: { - filename: `[name]${hashFormat.file}[ext]`, - }, }, // SVG: same as image but we need to separate it so it can be swapped for SVGR in the React plugin. { @@ -417,17 +415,11 @@ export function applyWebConfig( maxSize: 10_000, // 10 kB }, }, - generator: { - filename: `[name]${hashFormat.file}[ext]`, - }, }, // Fonts: Emit separate file and export the URL. { test: /\.(eot|otf|ttf|woff|woff2)$/, type: 'asset/resource', - generator: { - filename: `[name]${hashFormat.file}[ext]`, - }, }, ...rules, ],