CODEWITHSUNDEEP
javascriptecmascript-6importmodule
Moltenhead
Moltenhead

Reputation: 63

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

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

  1. JS source code is not executed within a script called with module="type" HTMLelements
  2. 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:

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

Upvotes: 1

Views: 4429

Answers (1)

Domino
Domino

Reputation: 6768

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];

Upvotes: 5

Related Questions