首次使用Chart.js遇导入报错：Cannot use import statement outside a module

问题原因分析 #

1. 你同时用了全局script引入Chart.js和ES模块import语句，两者冲突；普通<script>标签默认不支持ES模块语法，所以触发import报错。
2. 代码里存在拼写错误：配置项里的date应该是data，这会导致图表无法正常渲染。
3. document.getElementsByClassName()返回的是HTML元素集合，不能直接传给Chart构造函数，需要取出单个canvas元素。

方案一：传统全局引入（推荐新手使用） #

直接利用全局引入的Chart对象，去掉import语句，修正代码错误即可：

<script src="node_modules/chart.js/dist/chart.min.js"></script>

<script>
    // 全局引入后Chart已挂载到window，无需import
    var ctx = document.getElementsByClassName('line-chart')[0]; // 获取第一个canvas元素

    var chartGraph = new Chart(ctx, {
        type: 'line',
        data: { // 修正date为data
            labels: ["Jan", "Feb", "Mar"],
            datasets: [{
                label: 'Rate',
                data: [5,10,5,14,20] // 修正date为data
            }]
        }
    });
</script>

<canvas class="line-chart"></canvas>

方案二：ES模块方式引入 #

如果想用模块语法，需要给script标签加上type="module"，并使用Chart.js的ES模块版本：

<script type="module">
    // 引入Chart.js的ES模块版本，注意路径要与本地文件对应
    import Chart from 'node_modules/chart.js/dist/chart.esm.min.js';

    var ctx = document.getElementsByClassName('line-chart')[0];

    var chartGraph = new Chart(ctx, {
        type: 'line',
        data: {
            labels: ["Jan", "Feb", "Mar"],
            datasets: [{
                label: 'Rate',
                data: [5,10,5,14,20]
            }]
        }
    });
</script>

<canvas class="line-chart"></canvas>

内容的提问来源于stack exchange，提问作者steep88