Ошибка импорта файла JS: невозможно использовать оператор импорта вне модуля - PullRequest
Новая
       43

Ошибка импорта файла JS: невозможно использовать оператор импорта вне модуля

0 голосов
/ 20 января 2020

Я видел этот вопрос несколько раз. К сожалению, ни одно из решений не помогло мне.

Я пытаюсь импортировать JS файл , используя import . Когда я пытаюсь это сделать, я получаю следующую ошибку : 

"Uncaught SyntaxError: Cannot use import statement outside a module"

Некоторые предлагают назначить модуль type моим тегам сценария html. Это не решает мою проблему. Когда я это делаю, я получаю следующую ошибку :

"Access to script at 'file:///C:/Users/James%20Mike%20Culhane/sites/JMike-C.github.io/simple-projects/class_tester/foodsname.js' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https."

Если у кого-то есть альтернативные решения для импорта файла, я бы хотел их услышать. Спасибо:)

Я включил свой код ниже. Сначала два файла js, затем файл html. Для контекста, я пытаюсь сгенерировать весло для игры с кирпичом. 

// index.js file

import {Paddle} from "./src/paddle"

let canvas = document.getElementById("gameScreen")

let ctx = canvas.getContext("2d")

const GAME_WIDTH = 800
const GAME_HEIGHT = 600

ctx.clearRect(0,0,800,600)

let paddle = new Paddle(GAME_WIDTH,GAME_HEIGHT)
paddle.draw(ctx)

// paddle.js file in src directory

export default class Paddle {
    constructor(gameWidth,gameHeight) {

        this.width = 150
        this.height = 30

        this.position = {
            x: gameWidth / 2 -this.width / 2,
            y: gameHeight - this.height - gameHeight/10
        }
    }
    draw(ctx) {
        ctx.fillRect(this.position.x,this.position.y,this.width,this.height)
    }
}
// index.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <style>
            #gameScreen {
                border: 1px solid black;
            }
            img {
                display: none
            }
        </style>
    </head>
    <body>

        <center>
            <canvas id="gameScreen" width = 800 height = 600></canvas>
        </center>
        <script src="foodsname.js"></script>

    </body>
</html>
...