How to use a shared asset in multiple entrypoints

[leaumar]

Context

Allow me to link to this issue that hasn't gotten any response in a month (minimal repro zip in post 3).

So basically, I have some images that need to be bundled along with typescript sources to a few separate entrypoints. The same images are used in multiple entrypoints. Visualized:

• assets/asset.png
• assets/index.ts (hardcodes asset path)
• module1/entry1.ts (imports asset path)
• module2/entry2.ts (idem)

It used to be that I just had a static path string in my ts. I had to ensure the image was present in the dist with extra build steps/parameters to make it work at runtime. Recent parcel versions however no longer allow conveniently just globbing everything as an entrypoint so that the dist output matches the input file structure, you must ensure there's no overlap between the globs and code imports now. Since some of the same images are also referenced by manifest.json, this quickly becomes an errorprone PITA with a messy output structure. Other overlaps (html files importing ts and scss in my case) I was fortunately able to factor out.

I found that you can use new URL(path, import.meta.url) to let parcel detect assets so you don't need to bother with CLI globs. Very nice. Though you get an unrelenting Bundles must have unique names error if one of those paths is imported in more than one entrypoint. No amount of duplicating code works, the only solution is to duplicate the shared file on disk so each path is only used in 1 entrypoint.

TLDR

It seems wildly unlikely to me that a usecase as basic as sharing an asset between multiple entrypoints is broken and I'm the only one troubled by it. I must be just missing something stupid, some alternative solution — other than complementing unavoidable code imports with CLI globs and blind path strings — documented somewhere that everybody's using. Please enlighten me if your ts entrypoints are sharing an asset with parcel-detected paths and it all Just Works™ 🙏 Thanks