Uncaught SyntaxError: невозможно использовать оператор импорта вне модуля при экспорте и импорте класса - PullRequest
Новая
       121

Uncaught SyntaxError: невозможно использовать оператор импорта вне модуля при экспорте и импорте класса

0 голосов
/ 07 августа 2020

Итак, я готовлюсь к созданию игры-песочницы с чистым кодом, и я хочу создать отдельный файл для класса с именем Block в моем тестовом коде. Вот код:

package. json

{
    "name": "speedbox",
    "description": "SpeedBox is a simple SandBox game owned by Dean Summer (SpeedoThreeSixty).",
    "version": "1.0.0",
    "main": "index.html",
    "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1"
    },
    "repository": {
        "type": "git",
        "url": "https://github.com/JavascriptLearner815/SpeedBox.git"
    },
    "keywords": ["speedo", "speedothreesixty", "sandbox", "box", "speed", "speedbox"],
    "author": "Dean Summer <deanlovesmargie@gmail.com>",
    "license": "MIT",
    "bugs": {
        "url": "https://github.com/JavascriptLearner815/SpeedBox/issues"
    },
    "homepage": "https://github.com/JavascriptLearner815/SpeedBox"
}

index. html

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta name="description" content="SpeedBox is a simple SandBox game owned by Dean Summer (SpeedoThreeSixty).">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>SpeedBox - Home</title>
        <link rel="stylesheet" href="./main.css">
        <script defer src="block.js" type="module"></script>
        <script defer src="index.js" type="module"></script>
    </head>
    <body>
        <button id="createBlock">Create a block!</button>
    </body>
</html>

main. css is empty

index. js

try {
    import { Block } from "./block";
    globalThis.blocks = [];
    var createBlockButton = document.getElementById("createBlock");
    createBlockButton.addEventListener("click", () => {
        const newBlock = new Block(1);
        blocks.push(newBlock);
    });
} catch (error) {
    console.error(error);
}

block. js

export default class Block {
    constructor(id) {
        try {
            if (globalThis.blocks.length === 5) throw "Cannot exceed block limit";
            this.id = id;
            if (this.id === 1) this.type = "grass";
            console.log(`Created block of type ${this.type}`);
        } catch (error) {
            console.error(error);
        }
    }
}

Независимо от того, что я пытаюсь, я всегда получаю одно из следующих сообщений об ошибке: Uncaught SyntaxError: Невозможно использовать оператор импорта вне индекса модуля. js: 2 Uncaught SyntaxError: Неожиданный токен '{' index. js: 2 Uncaught SyntaxError: Неожиданный индекс идентификатора. js: 2

I do есть Node, но я не хочу использовать его в этом примере. Кроме того, эта проблема возникала раньше.

1 Ответ

0 голосов
/ 07 августа 2020

Сообщение об ошибке немного сбивает с толку, но вы не можете использовать объявление import внутри блока try. Он должен быть на верхнем уровне кода модуля: 

import { Block } from "./block"; /*
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ */
try {
    globalThis.blocks = [];
    var createBlockButton = document.getElementById("createBlock");
    createBlockButton.addEventListener("click", () => {
        const newBlock = new Block(1);
        blocks.push(newBlock);
    });
} catch (error) {
    console.error(error);
}
...