使用 ES6 时出现 MIME 类型错误 export/import

Question

如何在使用 ES6 export/import 时摆脱 "forbidden MIME type („text/html”)" 错误？
我的 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>
`

我也在使用 Firefox 73，VSCode 的 liveserver 扩展，这是客户端应用程序。我试过将 text/javascript 类型添加到脚本标签，但这没有帮助。

Answer 1

您需要向脚本提供 URL。

"./templates/about" 指向 HTML 文档。

可能你需要"./templates/about.js"。

请注意，浏览器无法实现 Node.js' 可以自动识别文件扩展名的模块名称解析系统。浏览器使用没有文件扩展名的 URLs（它们可能有一个句号后跟几个字母，其格式看起来像文件扩展名）。

使用 ES6 时出现 MIME 类型错误 export/import

MIME type error while using ES6 export/import

html

mime-types

es6-modules