如何解决浏览器端JS中‘Cannot Use import statement outside a module’错误？

一、解决import报错的两种客户端方案 #

不需要额外安装包，两种方案任选其一：

方案1：把脚本标记为ES模块 #

在HTML里引入JS文件时，给<script>标签加上type="module"属性，浏览器就会把该脚本当作ES模块处理，支持import语法：

<script type="module" src="你的脚本文件名.js"></script>

注意：模块方案中，import第三方库必须写完整CDN URL，不能直接写'mathjs'（浏览器无法解析这种“裸模块名”）。

方案2：改用全局CDN引入mathjs #

如果不想用模块，直接通过CDN加载mathjs的全局版本，不用写import，直接调用全局的math对象：

<script src="https://cdn.jsdelivr.net/npm/mathjs@11.8.0/lib/browser/math.min.js"></script>

二、你的代码里的其他问题修正 #

除了import报错，代码还有两处必须修改：

1. import语法错误：mathjs的floor和random是命名导出，不是默认导出，模块方案下要解构导入：

import { floor, random } from 'https://cdn.jsdelivr.net/npm/mathjs@11.8.0/lib/esm/index.js';

2. 事件监听参数错误：addEventListener的第一个参数必须是字符串'click'，不是未定义的变量click，否则会报错：

// 修正后
document.getElementById("changeColorOne").addEventListener('click', changeColor1);
// 另外两个监听同理修改

三、完整修正后的代码示例 #

方案1（ES模块） #

HTML：

<script type="module" src="color-script.js"></script>

color-script.js：

import { floor, random } from 'https://cdn.jsdelivr.net/npm/mathjs@11.8.0/lib/esm/index.js';

var colorValue = ["#000000", "#000000", "#000000"];
const hexadecimal = ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "A", "B", "C", "D","E","F"];
listening();

function listening() {
    document.getElementById("changeColorOne").addEventListener('click', changeColor1);
    document.getElementById("changeColorTwo").addEventListener('click', changeColor2);
    document.getElementById("changeColorThree").addEventListener('click', changeColor3);
}

function changeColor1() {
    document.querySelector(".square1").style.background = colorValue[0];
    colorValue[0] = colorDecide();
}

function changeColor2() {
    document.querySelector(".square2").style.background = colorValue[1];
    colorValue[1] = colorDecide();
}

function changeColor3(){
    document.querySelector(".square3").style.background = colorValue[2];
    colorValue[2] = colorDecide();
}

function colorDecide() {
    var tempValue = "#";
    for (var i = 1; i <= 6; i++) {
        let x = floor(random() * 16);
        tempValue += hexadecimal[x];
    }
    return tempValue;
}

方案2（全局引入） #

HTML：

<script src="https://cdn.jsdelivr.net/npm/mathjs@11.8.0/lib/browser/math.min.js"></script>
<script src="color-script.js"></script>

color-script.js：

var colorValue = ["#000000", "#000000", "#000000"];
const hexadecimal = ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "A", "B", "C", "D","E","F"];
listening();

function listening() {
    document.getElementById("changeColorOne").addEventListener('click', changeColor1);
    document.getElementById("changeColorTwo").addEventListener('click', changeColor2);
    document.getElementById("changeColorThree").addEventListener('click', changeColor3);
}

function changeColor1() {
    document.querySelector(".square1").style.background = colorValue[0];
    colorValue[0] = colorDecide();
}

function changeColor2() {
    document.querySelector(".square2").style.background = colorValue[1];
    colorValue[1] = colorDecide();
}

function changeColor3(){
    document.querySelector(".square3").style.background = colorValue[2];
    colorValue[2] = colorDecide();
}

function colorDecide() {
    var tempValue = "#";
    for (var i = 1; i <= 6; i++) {
        let x = math.floor(math.random() * 16);
        tempValue += hexadecimal[x];
    }
    return tempValue;
}

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