0

I am trying to build a small, modular Vanilla SPA JS project and I am using JS modules for this. The structure of my project is as follows:

/index.html
/index.js
  /js
    /mypage.js
  /pages
    /mypage.html

mypage.html

<head>
    <script src="../js/mypage.js" type="module"></script>
</head>
<div>whatever content here</div>

mypage.js

console.log('mypage module has loaded')

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <script src="./index.js" type="module"></script>
</head>
<body>
  <div id="app">
  </div>
</body>
</html>

index.js loads mypage.html through a fetch request, then sets the content of the #app div like so: 

const content = await fetch(/pages/mypage.html).then(data => data.text())
document.getElementById('app').innerHTML = content

I feel like this is a stupid question, but why won't the mypage.js module be requested? Is it because modules should be bundled only once at load time because that is how the browser works, duh? (The content of mypage.html gets injected in the #app div, the mypage.js script however is not loaded, it does not appear in the network tab)
Thank you!
NyxNight
  • 101
  • 4
  • const content = await fetch('/pages/mypage.html').then(data => data.text()) -> don't mind the single quotes, suppose they are there, this part works – NyxNight Jun 06 '22 at 17:16
  • Please [edit] your question to fix the typos and make clarifications (like the missing single quotes) – Bergi Jun 06 '22 at 18:56
  • 1
    "*why won't the mypage.js module be requested?*" - because `innerHTML` doesn't load and run ` – Bergi Jun 06 '22 at 19:01

0 Answers0