Cannot use import statement outside a module(Vanilla Javascript)

Question

when i tried to import a class from one js file to another i got this error

Uncaught SyntaxError: Cannot use import statement outside a module

when i added type="module" to my script tags i got this error

Access to script at 'file link' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.

any help on how to fix the error ?

You'll need to show how you are writing your `import` statement, and the relative folder structure between your js files. — Heretic Monkey, Jul 09 '20 at 16:02
Sounds like you're opening your HTML file directly in the browser... you can fix this error by serving your web files from an HTTP server running on localhost — mlibby, Jul 09 '20 at 16:02

score 1 · Answer 1 · answered Jul 09 '20 at 17:36

1

this was simply solved by adding type="module" to my script tags and serving my web files from an HTTP server running on localhost instead of opening the html file directly

these answers were helpful :

How to run html file on localhost?

answered Jul 09 '20 at 17:36

Safwen Hafsawy

39
5

score 1 · Answer 2 · edited Nov 05 '21 at 08:45

1

First off, you have to include the type="module" attribute in your script tag.

Secondly, when using the import statement, don't leave out the file extension, in this case .js. e.g: import { sqrRoot } from "./math_function.js"

edited Nov 05 '21 at 08:45

Dharman

30,962
25
85
135

answered Nov 05 '21 at 08:40

Bravo Stack

111
1
6

score 0 · Answer 3 · answered Nov 05 '21 at 08:43

0

Just run your application by using your http server. Do not access it directly.

answered Nov 05 '21 at 08:43

thegreytangent

316
2
12

No more local development from file:/// ?.. Times, times... – Brian Cannard Feb 23 '22 at 18:23

Cannot use import statement outside a module(Vanilla Javascript)

3 Answers3

Linked