Code is not executing within Javascript module typed script source [ES6]

Question

Trying to use ES6 but I'm stuck on something. To make it simple there is two problems :

JS source code is not executed within a script called with module="type" HTMLelements
importing directly from index.html returns SyntaxError: fields are not currently supported

Tried and dug both cases, can't get what is wrong. Paths are right. Not putting .js extension within from statement was returning errors for the second try with import used directly in index.html. Previously initGame() was a $(document).ready(function(e) { ... });. Also returns an error, if I don't sepcify type="module" within index.html.

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
  <meta http-equiv="Content-Language" content="en">

  <title></title>

  <link rel="stylesheet" href="design/css/main.css">
</head>
<body>
  <main id="displayer">
  </main>
</body>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script type="module">
  import { initGame } from "./lib/js/core.js";
  initGame();
</script>
<script type="application/javascript, module" src="./lib/js/core.js"></script>
</html>

//core.js
import { Board } from './classes/Board.js';
import { Pawn } from './classes/Pawn.js';

export function initGame () {
  console.log("plop");
  var $displayer = $('#displayer');
  var board = new Board($displayer, 32, 19, 19, ['#ffffcc', '#333333']);
  console.debug(board);
}

//Board.js
import { TileMap } from "./TileMap.js"

export class Board extends TileMap
{
    _tileColors;

    constructor(wrapper, tileSize, columnsNb, rowsNb, tileColors) {
        super(wrapper, tileSize, columnsNb, rowsNb);

        this._name = "Board:" + columnsNb + ":" + rowsNb;

        this.selector.css({
            class: "board"
        })

        tileColors.forEach(function(color, i) {
            this._tileColors[i] = color;
        });
        this.colorize();
    }

    colorize() {
        this._grid.forEach(function(col, i) {
            col.forEach( function(tile, j) {
                tile.color = ((i + j) % 2 === 0) ? this.getColor(0) : this.getColor(1);
            });
        });
    }

    getColor(index) {
        return this._tileColors[index];
    }
}

Just wanting to use the modulare system of ES6 for convenience and self teaching.

Errors:

If no type="module" src="path" specified:
- SyntaxError: import declarations may only appear at top level of a module
empty console if just <script type="module"> and $(document).ready() variation for core.js
If this version is active:
- SyntaxError: fields are not currently supported

Are you using a JavaScript compiler? And can you copy some of the errors that you got. — AndrewL64
– AndrewL64, Commented Feb 11, 2019 at 16:51
Nope I'm not. Is it needed ? I'll had them to the main post. — Moltenhead
– Moltenhead, Commented Feb 11, 2019 at 16:59
Does the JavaScript file load when you do import { initGame } from "./lib/js/core.js"; in the inline <script>? Check your browser's network tab. — Felix Kling
– Felix Kling, Commented Feb 11, 2019 at 17:10
only the GET from jquery, but still returning the third error : screenshot — Moltenhead
– Moltenhead, Commented Feb 11, 2019 at 17:19

Domino · Accepted Answer · 2019-03-22 20:00:55Z

5

The syntax you used to declare _tileColors is called a field declaration and is a highly experimental proposal. They were only implemented in Chrome 72 and above, and seem to be partially implemented in some Firefox builds if you enable the experimental flag for them.

You need to remove the line _titleColors; from the class and to set this._titleColors within the constructor. Besides, your constructor's code as it stands is broken, it's trying to set the content of _titleColors but the variable isn't even initialized. Instead, you can do (assuming titleColors is an array):

// create an array copy of titleColors
this._tileColors = [...titleColors];

answered Mar 22, 2019 at 20:00

Domino

6,8781 gold badge37 silver badges61 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Code is not executing within Javascript module typed script source [ES6]

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related