Compilation error (the same filename for multiple chunks) when import an image twice with the same filename

[shlajin]

Current Behavior

When I try to serve my project, I get this error

[webpack-dev-middleware] Error: Conflict: Multiple chunks emit assets to the same filename preview.png (chunks main and main)

Expected Behavior

I should get no error; images should have different names.

GitHub Repo

https://github.com/shlajin/nx-multiple-chunks-bug-demo

Steps to Reproduce

I started with a brand new repo to illustrate the problem.

npx create-nx-workspace --pm yarn
Need to install the following packages:
  [email protected]
Ok to proceed? (y) y

 >  NX   Let's create a new workspace [https://nx.dev/getting-started/intro]

✔ Where would you like to create your workspace? · multiple-chunks-bug-demo
✔ Which stack do you want to use? · react
✔ What framework would you like to use? · none
✔ Standalone project or integrated monorepo? · integrated
✔ Application name · multiple-chunks-bug-demo
✔ Which bundler would you like to use? · webpack
✔ Default stylesheet format · css
✔ Enable distributed caching to make your CI faster · No

 >  NX   Creating your v16.5.5 workspace.

I added a library (no tests, not buildable, not publishable).

yarn nx g @nx/react:lib sample-library

I added 2 different images into the following folders:

libs/sample-library/src/lib/apple/preview.png
libs/sample-library/src/lib/orange/preview.png

And added 2 files next to each of the images that simply import and re-export the image:

// libs/sample-library/src/lib/orange/Orange.ts
import Preview from './preview.png';

export const orangeData = {
  image: Preview,
};


// libs/sample-library/src/lib/apple/Apple.ts
import Preview from './preview.png';

export const appleData = {
  image: Preview,
};

Then, in libs/sample-library/src/index.ts I re-exported my 2 files:

import { appleData } from "./lib/apple/Apple"
import { orangeData } from "./lib/orange/Orange"

export const data = {
  appleData,
  orangeData
}

To recap, I have 2 folders named apple and orange, each folder contains a preview.png file and one .ts file each. The *.ts file simply re-exports the image (obtains the image URL as per default behaviour), and the index.ts of the whole library re-exports the *.ts files.

Now if I try to use the images in the app, e.g.

// apps/multiple-chunks-bug-demo/src/app/app.tsx
import { data } from "@multiple-chunks-bug-demo/sample-library"

export function App() {
  return (
    <div>
      <h1>DEMO</h1>
      <img src={data.appleData.image} />
      <img src={data.orangeData.image} />
    </div>
  );
}

export default App;

and run

yarn nx serve multiple-chunks-bug-demo

I get

[webpack-dev-middleware] Error: Conflict: Multiple chunks emit assets to the same filename preview.png (chunks main and main)

I attached a demo repo for your convenience.

Thank you!

Nx Report

Node   : 18.14.0
   OS     : darwin-arm64
   yarn   : 1.22.19

   nx                 : 16.5.5
   @nx/js             : 16.5.5
   @nx/jest           : 16.5.5
   @nx/linter         : 16.5.5
   @nx/workspace      : 16.5.5
   @nx/cypress        : 16.5.5
   @nx/devkit         : 16.5.5
   @nx/eslint-plugin  : 16.5.5
   @nx/react          : 16.5.5
   @nrwl/tao          : 16.5.5
   @nx/web            : 16.5.5
   @nx/webpack        : 16.5.5
   typescript         : 5.1.6

✨  Done in 0.83s.

Failure Logs

No response

Operating System

• macOS
• Linux
• Windows
• Other (Please specify)

Additional Information

No response

[Schmale97]

I am also seeing this after upgrading from 16.3 to 16.6

[CurtisHughes]

Seems like the hash got removed from the outputted file name. I think it might be related to #17763

[triglian]

Seems like it only happens with the dev server. The production builds continue to have the hash. cc @jbadeau

[github-actions]

This issue has been automatically marked as stale because it hasn't had any recent activity. It will be closed in 14 days if no further activity occurs.
If we missed this issue please reply to keep it active.
Thanks for being a part of the Nx community! 🙏

[shlajin]

bump

[github-actions]

This issue has been closed for more than 30 days. If this issue is still occuring, please open a new issue with more recent context.