I have problem with importing JS scripts from code. I have a canvas game, and want to import my classes rather than define they in HTML. But when I run my code in Edge, it throws me an error.

init.js

import {Tram} from "./tram/tram"

var body;
var curScreen = "menu";
var canvas = document.createElement("canvas");
canvas.width = 1920;
canvas.height = 1080;
var ctx = canvas.getContext("2d");
var tex = {};
var corrHeight = 
loadTextures();

window.onload = function () {
    body = document.body;
    body.appendChild(canvas);

    window.onclick = function () {
        if (body.requestFullscreen) {
            body.requestFullscreen();
        }
        else if (body.msRequestFullscreen) {
            body.msRequestFullscreen();
        }
        else if (body.mozRequestFullScreen) {
            body.mozRequestFullScreen();
        }
        else if (body.webkitRequestFullscreen) {
            body.webkitRequestFullscreen();
        }
    };

    mainLoop();
};

function updateCanvasRect() {
    canvas.width = brect.width;
    canvas.height = brect.height;
    var prop = 16 / 9;
    tex.sky.img.height = brect.height;
    tex.sky.img.width = brect.height * prop;
    tex.sky.patt = ctx.createPattern(tex.sky.img, "repeat-x");
}

function loadTextures() {
    tex.sky = importTexture("base/sky");
}

I have following folder structure:

  ts2d/
    img/
      ...
    base/
      ...
      tram/
        tram.js
        ...
      init.js
      load.js
    main.js
    index.html

I have problem with importing JS scripts from code. I have a canvas game, and want to import my classes rather than define they in HTML. But when I run my code in Edge, it throws me an error.

init.js

import {Tram} from "./tram/tram"

var body;
var curScreen = "menu";
var canvas = document.createElement("canvas");
canvas.width = 1920;
canvas.height = 1080;
var ctx = canvas.getContext("2d");
var tex = {};
var corrHeight = 
loadTextures();

window.onload = function () {
    body = document.body;
    body.appendChild(canvas);

    window.onclick = function () {
        if (body.requestFullscreen) {
            body.requestFullscreen();
        }
        else if (body.msRequestFullscreen) {
            body.msRequestFullscreen();
        }
        else if (body.mozRequestFullScreen) {
            body.mozRequestFullScreen();
        }
        else if (body.webkitRequestFullscreen) {
            body.webkitRequestFullscreen();
        }
    };

    mainLoop();
};

function updateCanvasRect() {
    canvas.width = brect.width;
    canvas.height = brect.height;
    var prop = 16 / 9;
    tex.sky.img.height = brect.height;
    tex.sky.img.width = brect.height * prop;
    tex.sky.patt = ctx.createPattern(tex.sky.img, "repeat-x");
}

function loadTextures() {
    tex.sky = importTexture("base/sky");
}

I have following folder structure:

  ts2d/
    img/
      ...
    base/
      ...
      tram/
        tram.js
        ...
      init.js
      load.js
    main.js
    index.html

• javascript
• import
• microsoft-edge

• 1 Which version of Edge? – Hunter McMillen Commented Feb 2, 2018 at 14:49
• 16, with exp. features enabled – user9255534 Commented Feb 2, 2018 at 14:51
• Any more context you can provide? There isn't really much to go on here. e.g. Can you post the full error message / stacktrace? Is the line you listed in init.js where the error originates? – Hunter McMillen Commented Feb 2, 2018 at 15:03
• @Hunter McMillen I'm just getting this error on line 1 (where I import my class) SCRIPT1086: SCRIPT1086: Module import or export statement unexpected here – user9255534 Commented Feb 2, 2018 at 15:08
• Are other imports working? Try adding the .js suffix to the import statement – Hunter McMillen Commented Feb 2, 2018 at 15:24

1 Answer 1

Solved! The problem was in HTML script declaration:

I used this code:

<script src="base/init.js"></script>

But I don't knew, that I need to specify type attribute, with code below import works excellent!

<script src="base/init.js" type="module"></script>

UPD: variables just are file-scoped, to use in another file export variables:

var myVar = "string";
export {myVar};

and then in your file

import {myVar} from "<file>";