我无法解决错误“无法加载模块脚本：应为JavaScript模块脚本，但服务器响应的MIME类型为“text/html”。根据HTML规范，对模块脚本强制执行严格的MIME类型检查。
我正在尝试导入'main.js'文件中的Chart.js库，该文件将在'index.html'中被称为：
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>my Chart</title>
</head>
<body>
<div class="chart-container">
<canvas id="myChart"></canvas>
</div>
<script type="module" src="main.js"></script>
</body>
</html>main.js
import Chart from "./node_modules/chart.js/auto";
const ctx = document.getElementById("myChart");
new Chart(ctx, {
type: 'line',
data: {
labels: [...Array(10).keys()],
datasets: [{
label: 'myChart',
data: [10, 9, 8, 7, 5, 4, 3, 2, 1]
}]
},
options: {
scales: {
y: { type: 'logarithmic'}
}
}
});根据文档，您通常直接在html文档中使用以下命令调用脚本：<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>然而，我安装了npm install chart.js和npm install chartjs-plugin-zoom库，因为我需要添加其他功能，如插件，这些插件将作为import zoomPlugin from "./node_modules/chartjs-plugin-zoom";导入到'main.js'中。'main.js'和'index.html'文件与'node_modules'在同一目录中。
当从'main.js'中删除行import Chart from "./node_modules/chart.js/auto";并直接通过<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>调用脚本时，错误消失，但是我不能从import zoomPlugin from "./node_modules/chartjs-plugin-zoom";中使用'zoomPlugin'，因为在此导入时也发生MIME类型错误。
什么可能导致“MIME类型”错误？
1条答案
按热度按时间wztqucjr1#
只能导入JavaScript（和JSON）模块。
URL
./node_modules/chart.js/auto指向HTML文档，而不是JavaScript模块。当我从npm安装该模块时，浏览一下目录结构，
auto是一个目录，而不是JavaScript模块。假设您的HTTP服务器正在生成一个包含目录列表的HTML文档。同样，
"./node_modules/chartjs-plugin-zoom也将是一个目录列表。node_modules目录只包含 * 个目录（每个安装的模块一个）。