I have a simple web application (no frameworks) that I am bundling with Parcel. It has a pages folder and a components folder. Components are just bits of html that I want to reuse throughout the application. Pages are the entry-points of the bundle (parcel build pages/index.html pages/*/*.html).
Components are made of an html file and a javascript file. I import the html into the javascript with bundle-text:, create a DOM element with the string result and then append it to the document. The javascript file is then imported in files in the pages directory.
The problem is that if I use an anchor tag inside a component where the href points to a file in /pages the bundle is broken. It cannot resolve the paths correctly. If I use a path relative to where the component is imported eg. <a href="/someFolderInPages/index.html> Parcel cannot find the correct file: @parcel/core: Failed to resolve '/someFolderInPages/index.html' from './components/comp-1/index.html'.
If I use a path that goes from /components to /pages eg. <a href="../pages/someFolderInPages/index.html> it says: Error: Bundles must have unique names.
Is there a way to fix this or should I drop the html file in the components completely?
When you reference pages from components with the style /someFolderInPages/index.html, the error you get is probably expected - the / at the beginning is an "absolute specifier" and tells parcel to start at the project root. So you'd probably need to write /pages/someFolderInPages/index.html or /src/pages/someFolderInPages/index.html (depending on how your project is structured) for parcel to be able to find the source file you want correctly.
However, that won't really solve your problem, because the second error you get (when you use the style "../pages/someFolderInPages/index.html") is what will happen when you parcel does resolve the dependency. This appears to me to be a possible bug in parcel - feel free to file a github issue if you'd like.
However, there might be a better way to accomplish what you want that has the side-effect of avoiding this bug. You said "Components are just bits of html that I want to reuse throughout the application" - if that's all they are, it would be more performant for the users of your application if they were inserted into pages at build-time instead of run-time.
Parcel can do exactly this with .pug templates (see parcel docs and pug docs).
For example, a "component" might have some re-usable snippet of html (expressed in pug syntax):
/src/components/someComponent.pug
a(href="../pages/someFolderInPages/index.pug") Link from a component to a page
Then, you could included in a "page" like this:
/src/page/anotherFolderInPages/index.pug
doctype html
html
body
h1 The link from the component will show up below:
include ../../components/someComponent.pug
Parcel will take care of building the page at compile-time (turning it into an .html file), so there's no need for a separate javascript bundle to download and execute at runtime just to insert some HTML.