How to fix “cannot use import statement outside a module”

I stumbled on this error: Uncaught SyntaxError: cannot use import statement outside a module while importing a function from a JavaScript file.

This error occurs for one reason: you’re trying to use import and you’re not inside an…


This content originally appeared on flaviocopes.com and was authored by flaviocopes.com

I stumbled on this error: Uncaught SyntaxError: cannot use import statement outside a module while importing a function from a JavaScript file.

This error occurs for one reason: you’re trying to use import and you’re not inside an ES module.

It can happen in a Node.js environment, or in the browser.

First, here’s the solution for Node.js: I had to add a package.json file in the folder of the project and add:

{
  "type": "module"
}

In the browser instead, you have to add the type attribute with the value module when you load the script, like this:

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

instead of

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


This content originally appeared on flaviocopes.com and was authored by flaviocopes.com


Print Share Comment Cite Upload Translate Updates
APA

flaviocopes.com | Sciencx (2022-04-19T05:00:00+00:00) How to fix “cannot use import statement outside a module”. Retrieved from https://www.scien.cx/2022/04/19/how-to-fix-cannot-use-import-statement-outside-a-module/

MLA
" » How to fix “cannot use import statement outside a module”." flaviocopes.com | Sciencx - Tuesday April 19, 2022, https://www.scien.cx/2022/04/19/how-to-fix-cannot-use-import-statement-outside-a-module/
HARVARD
flaviocopes.com | Sciencx Tuesday April 19, 2022 » How to fix “cannot use import statement outside a module”., viewed ,<https://www.scien.cx/2022/04/19/how-to-fix-cannot-use-import-statement-outside-a-module/>
VANCOUVER
flaviocopes.com | Sciencx - » How to fix “cannot use import statement outside a module”. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2022/04/19/how-to-fix-cannot-use-import-statement-outside-a-module/
CHICAGO
" » How to fix “cannot use import statement outside a module”." flaviocopes.com | Sciencx - Accessed . https://www.scien.cx/2022/04/19/how-to-fix-cannot-use-import-statement-outside-a-module/
IEEE
" » How to fix “cannot use import statement outside a module”." flaviocopes.com | Sciencx [Online]. Available: https://www.scien.cx/2022/04/19/how-to-fix-cannot-use-import-statement-outside-a-module/. [Accessed: ]
rf:citation
» How to fix “cannot use import statement outside a module” | flaviocopes.com | Sciencx | https://www.scien.cx/2022/04/19/how-to-fix-cannot-use-import-statement-outside-a-module/ |

Please log in to upload a file.




There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.