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?
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.
fetch('/components/facts-and-steps/template.html')
fetch(new URL('./template.html', import.meta.url))