MIME type error while using ES6 export/import

Question

How to get rid of "forbidden MIME type („text/html”)" error while using ES6 export/import?
My html:
<script src="app.js" type="module"></script> app.js:

import {about} from "./templates/about"
let contentContainer = document.getElementById('contentContainer');
const routes = {
    "/" : about,
}

window.onpopstate = () =>{
    contentContainer.innerHTML = routes[window.location.pathname];
}
console.log("script")

about.js:

export const about =`
<section class="about-us">
            <div class="about-us-img">
                <div class="img-shader">
                    <h1 class="about-title">ABOUT US</h1>
                    <article class="about-description">
                        <p>Our company specializes in high quality wooden products.</p>
                        <p>We care about natural environment so we plant two trees for each one we cut down to make the product.</p>
                    </article>
                    <button id="shop-link">shop now</button>
                </div>
            </div>
        </section>
`

Also i am using Firefox 73, liveserver extension to VSCode and this is client-side application. I've tried adding text/javascript type to script tag but this didn't help.

Answer 1

You need to provide the URL to the script.

"./templates/about" is pointing to an HTML document.

Probably you need "./templates/about.js".

Note that browsers cannot implement Node.js' module name resolution system which can figure out file extensions automatically. Browsers use URLs which don't have file extensions (through they might have a full stop character followed by a few letters in a format that looks like a file extension).