使用ES6导出/导入时出现MIME类型错误

Question

如何在使用ES6导出/导入时消除"禁止的MIME类型("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类型添加到script标记中，但这没有帮助。

Answer 1

您需要提供脚本的URL。

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

也许你需要"./templates/about.js"。

请注意，浏览器无法实现Node.js的模块名称解析系统，该系统可以自动计算文件扩展名。浏览器使用没有文件扩展名的URL(它们可能有一个句号，后面跟着几个字母，格式看起来像文件扩展名(。