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,
],