Parcel Not Bundling Dynamically Fetched HTML Files

Question

I have a simple HTML, CSS, JS app that I'm trying to bundle. I noticed that when using fetch() within an HTML file to insert a partial HTML file like this:

fetch('../partials/header.html')
 .then(res => res.text())
 .then(htmlText => {
 document.querySelector('.header').innerHTML = htmlText;
 })

Parcel doesn't change the path of the img within the partial (../assets/CompanyLogo.webp):

<a href="../index.html" aria-label="home">
 <img src="../assets/CompanyLogo.webp" alt="company logo" class="header-logo">
</a>
<nav class="header-nav">
 <a href="../pages/tour.html">tour</a>
 <a href="https://example.com" target="_blank">merch</a>
 <a href="../pages/music.html">music</a>
 <a href="../pages/contact.html">contact</a>
</nav>

Does anyone have any solution for this, other than manually changing the image path after bundling?

• JaecadeJnight: You've got a .header-nav element, but your JS is fetching data to a .header element. Double check that (unless that's intended behavior and you simply didn't include the .header element). It also might help us if you give more code so we can understand the issue better.
• EltonS.: The header partial (the file I included) is meant to contain just the header content. The intended behavior is to insert the header content into the header div on the page.

Answer 1

Parcel’s documentation on bundle inlining suggests that HTML imports will be transformed by default:

import header from 'bundle-text:../partials/header.html';
document.querySelector('.header').innerHTML = htmlText;

This puts the HTML in your bundled script, so it isn’t the same as using a fetch, but is probably better. (Better still would typically be to use a template engine like Pug, or something else that supports partials like JSX, so your full HTML is served up front like a normal document. More efficient, fewer failure cases.)

• EltonS.: I purposefully built this app as vanilla as possible. Haven't tried bundle inlining, but I did end up figuring it out (answer posted)

Answer 2

I used PostHTML as suggested by Parcel docs. It allowed me to insert partials using the <include> element, instead of inserting dynamically using js.