无法使用导入对象的函数[复制]

Question

我正在重建一个网站，其中包含了战斗游戏Tekken7中人物的基本介绍。我已将所有字符及其数据作为对象存储在一个文件中。

/* CHARACTERS */
const characters = {
    // Akuma
    akuma: {
        // Profile
        name: "Akuma (Gouki)",
        nickname: "The Raging Demon",

        flag: "../img/flagicons/unknown.svg",
        image: "../img/characters/akuma.png",

        age: "Unknown",
        country: "Unknown",
        fightingStyle: "Ansatsuken, Satsui no Hadō",
        debut: "<em>Tekken 7</em>",

        // Scores
        offense: 10,
        defence: 10,
        range: 7,
        punishment: 7,

        gimmicks: 4,
        execution: 5,
        hurtbox: 3,

        // Playstyle
        playstyle: `Offensive, unorthodox, "MESSATSU!"`,
        introduction: "<p>Guest character from Capcom's <em>Street Fighter</em> series with great offensive tools and some of the highest damage output in the game thanks to his meter and special moves. However, a lot of his key moves come with some risk, generally being either unsafe on block or leaving him vulnerable in mid-air.</p>",
    },
    get gouki() {
        return this.akuma;
    },
    get gōki() {
        return this.akuma;
    },

    // Heihachi Mishima
    heihachi: {
        // Profile
        name: "Heihachi Mishima",
        nickname: "The King of Iron Fist",

        flag: "../img/flagicons/japan.svg",
        image: "../img/characters/heihachi-2.png",

        age: 75,
        country: "Japan (citizenship denied by government)",
        fightingStyle: "Mishima-ryū karate",
        debut: "<em>Tekken</em>",

        // Scores
        offense: 9,
        defence: 7,
        range: 8,
        punishment: 7,

        gimmicks: 3,
        execution: 4,
        hurtbox: 4,

        // Playstyle
        playstyle: "Offensive, Mishima",
        introduction: "<p>Offensive Mishima character with great poking, good counter hit tools, great damage output and good range. However, a lot of his best lows are launch punishable if not just unsafe on block, while his WS/FC punishment is mediocre.</p>",
    },

    // Kazumi Mishima
    kazumi: {
        // Profile
        name: "Kazumi Mishima",
        nickname: "The Assassin of Hachijō",

        flag: "../img/flagicons/japan.svg",
        image: "../img/characters/kazumi.png",

        age: "Unknown (deceased)",
        country: "Japan",
        fightingStyle: "Hachijō-ryū karate, Mishima-ryū karate",
        debut: "<em>Tekken 7</em>",

        // Scores
        offense: 9,
        defence: 7,
        range: 7,
        punishment: 7,

        gimmicks: 3,
        execution: 1,
        hurtbox: 2,

        // Playstyle
        playstyle: "Offensive, poking",
        introduction: "<p>Offensive character who, despite her name, lacks a big chunk of the Mishima-style toolset that her family members possess but more than makes up for it with great poking, great pressure tools, good counter hit tools and great range (partly thanks to her teleporting pet tiger). However, she lacks range on some key punishers, while most of her best lows are quite slow and unreliable for pressure.</p>",
    },
}

/* EXPORTING CHARACTERS */
export { characters };

然后，我试图导出到另一个文件，该文件包含一个函数，在网页上显示给定的haracter的数据，接受该字符的名称作为其唯一参数。但是，当我在浏览器上检查控制台时，我会得到一个SynTaxError，上面写着“无法在模块之外使用导入语句”。这里有什么问题？

/* IMPORTING CHARACTERS */
import { characters } from './character-list.js';


/* DECLARATIONS */
// Profile
let charName = document.getElementById("char-name");
let charNickname = document.getElementById("nickname");

let charFlag = document.getElementById("flag");
let charImg = document.getElementById("image");

let charAge = document.getElementById("age");
let charCountry = document.getElementById("country");
let charFightingStyle = document.getElementById("fighting-style");
let charDebut = document.getElementById("first-appearance");

// Scores
let charOffense = document.getElementById("offense");
let charDefence = document.getElementById("defence");
let charRange = document.getElementById("range");
let charPunishment = document.getElementById("punishment");

let charGimmicks = document.getElementById("gimmicks");
let charExecution = document.getElementById("execution");
let charHurtbox = document.getElementById("hurtbox");

// Playstyle and Intro
let charPlaystyle = document.getElementById("playstyle");
let charIntro = document.getElementById("introduction");


/* DISPLAY FUNCTION */
const display = character => {
    charName.innerHTML = characters[character].name;
    charNickname.innerHTML = characters[character].nickname;

    charFlag.src = characters[character].flag;
    charImg.src = characters[character].image;

    charAge.innerHTML = characters[character].age;
    charCountry.innerHTML = characters[character].country;
    charFightingStyle.innerHTML = characters[character].fightingStyle;
    charDebut.innerHTML = characters[character].debut;

    charOffense.innerHTML = characters[character].offense;
    charDefence.innerHTML = characters[character].defence;
    charRange.innerHTML = characters[character].range;
    charPunishment.innerHTML = characters[character].punishment;

    charGimmicks.innerHTML = characters[character].gimmicks;
    charExecution.innerHTML = characters[character].execution;
    charHurtbox.innerHTML = characters[character].hurtbox;

    charPlaystyle.innerHTML = characters[character].playstyle;
    charIntro.innerHTML = characters[character].introduction;
}


/* CALLING DISPLAY FUNCTION */
let params = (new URL(document.location)).searchParams;
let char = params.get("view");
display(char);

Answer 1

如文件所述：

静态导入语句用于导入由另一个模块导出的只读实时绑定。无论您是否声明导入的模块，它们都处于严格模式。除非嵌入式脚本具有type=“module”，否则不能在嵌入式脚本中使用import语句。导入的绑定称为活动绑定，因为它们由导出绑定的模块更新。

还有一个类似dynamic import（）的函数，它不需要type=“module”脚本。

TL；DR:
在使用