无法对导入的对象使用功能

如何解决无法对导入的对象使用功能

我正在重建一个网站，其中包含格斗游戏 Tekken 7 中角色的基本介绍。我已经将所有字符及其数据作为对象存储在一个文件中。

/* 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,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ō",image: "../img/characters/kazumi.png",age: "UnkNown (deceased)",country: "Japan",fightingStyle: "Hachijō-ryū karate,Mishima-ryū karate",execution: 1,hurtBox: 2,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 };

然后，我尝试导出到另一个文件，该文件包含在网页上显示给定的汉字数据的函数，并接受该字符的名称作为其唯一的参数。但是，当我在浏览器上检查控制台时，出现SyntaxError，提示“无法在模块外部使用import语句”。这是什么问题？

/* 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);

解决方法

documentation指出：

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

还有一个类似函数的动态import（），它不需要 类型为“模块”的脚本。

TL; DR ：
使用type = "module"时使用<script>标签时，请添加import。