Fetch returns 404 not found in web component

Question

I have a component, facts-and-steps.js, and I want to import an HTML file that contains a <template> in it. I am trying to use fetch to get the template.html file, but it's returning a 404 error.

Here is the code that returns 404:

let x = await (await fetch('./template.html')).text();
//x prints "Not Found"

I am using the Open-wc @web/dev-server - https://modern-web.dev/docs/dev-server/overview/

How can I fetch files?

Answer 1

fetch loads relative resources based on where it is executed, not where it is loaded from. Say you have example.com/components/facts-and-steps/facts-and-steps.js loaded and executed on example.com/. It will try to load example.com/template.html. You basically have a couple of options.

1. Load with a more complete path

fetch('/components/facts-and-steps/template.html')

2. Use a import.meta. Web.dev has a good guide.

fetch(new URL('./template.html', import.meta.url))