CODEWITHSUNDEEP
javascript
naftalimich
naftalimich

Reputation: 411

Cryptic Error message on Javascript module import

the app starting point is main.html

In main.html, I introduce index.js via a tag.

In index.js, I import a Paddle class from paddle.js

all 3 files are in the same directory

If I copy the Paddle class (which draws on rectangle on the bottom of the canvas on main.html) from paddle.js and paste it into index.js ... it works fine.

However, importing the Paddle class from the paddle module, results in nothing in the screen and what to me is a cryptic syntax error in the Chrome Javascript console: "import Paddle from "/paddle"; Uncaught syntax error, unexpected identifier"

the code:

main.html -- at the bottom of the tag

<script src="index.js"> </script>

index.js

import Paddle from "/paddle";

let canvas = document.getElementById("gameScreen");

...

paddle.js

export default class Paddle {...}

I'm using chrome 70, but it also fails on Firefox 63 (both of which reportedly support modules out of the box)

I'm looking all over google and matching up syntax with the docs but can't see anything wrong with it.

Upvotes: 0

Views: 260

Answers (2)

naftalimich
naftalimich

Reputation: 411

In order to import from within an embedded script you have to add attribute="module" to the tag of the embedded script. MDN.

The static import statement is used to import bindings which are exported by another module. Imported modules are in strict mode whether you declare them as such or not. The import statement cannot be used in embedded scripts unless such script has a type="module".

There is also a function-like dynamic import(), which does not require scripts of type="module".

Upvotes: 0

Nurbol Alpysbayev
Nurbol Alpysbayev

Reputation: 21931

Can you try this and tell me if it does not help

<script type="module" src="index.js"> </script>

Upvotes: 1

Related Questions