无法使用 Chart.js 加载模块脚本：“文本/html”的 MIME 类型

问题描述 投票：0回答：0

我无法解决错误“无法加载模块脚本：需要一个 JavaScript 模块脚本，但服务器以“text/html”的 MIME 类型响应。根据 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 类型”错误？

javascript chart.js mime-types
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.