In this quick guide we'll look at how you can solve the very common error, "Uncaught SyntaxError: Cannot use import statement outside a module". This error arises when we try to use inside of a project which is not set up for modules - so let's look at how you can resolve it. import Resolving the import statement outside a module error The reason why this error occurs is because we have to explicitly tell Javascript that the file in question is a , in order to use the statement. For example, if you are using the line below, and you have not told Javascript that the file is a module, it will throw an error: module import import fs from 'fs' Depending on where you are getting the error, there are a few different ways to resolve it. Resolving the import module error in Node.js If you are using Node.js, this error can be resolved in two ways. The first is to update your package.json to tell Node.js that this entire project is a module. Open up your package.json, and at the top level, add . For example, my will look like this: "type": "module" package.json {
    // ... other package.json stuff
    "type": "module"
    // ... other package.json stuff
} This will resolve the issue immediately. However, in some edge cases, you may find you have issues with this, and other parts of your code may start throwing errors. If you only want one file in your project to support , then change the file extension to . For example, if your was in , rename to . Now your issue will be resolved. import .mjs import index.js index.js index.mjs Resolving the import module error in script tags The second place this error can occur is in a script tag, like this: <script src="mymodule.js"></script> In this case, if contains an statement, it won't work. To resolve this, add to your script tag: mymodule.js import type="module" <script type="module" src="mymodule.js"></script> Now you'll never have issues with again. import Also published . here

How to Sort an Array by Date in Javascript

How to Install NVM to Manage Node Versions Easily

Nominated for 2022 - HackerNoon Contributor of the Year - Javascript

Nominated for 2022 - HackerNoon Contributor of the Year - Coding

Nominated for 2022 - HackerNoon Contributor of the Year - Coding Skills

Nominated for 2022 - Tip Your Hat Tutorials Best Tutorials

Nominated for 2022 - HackerNoon Contributor of the Year - Java

Nominated for 2022 - HackerNoon Contributor of the Year - Website Development

Nominated for Coding Guru of 2022

Nominated for 2022 - HackerNoon Contributor of the Year - Typescript

Too Long; Didn't Read

2 Quick and Easy Ways to Fix 'Uncaught SyntaxError: Cannot use import statement outside a module'

2 Quick and Easy Ways to Fix 'Uncaught SyntaxError: Cannot use import statement outside a module'

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

A Basic Guide to Event Handling in Vue

10 Must Have Chrome Extensions for a Web Developer

The Noonification: Can Mankind Survive as an Interplanetary Species? (10/20/2022)

132 Stories To Learn About Performance

3 Golang Pitfalls Every Developer Needs to Know

🤩 24 Coolest VSCode Extensions That Will Rock Your World 🛠

A Basic Guide to Event Handling in Vue

10 Must Have Chrome Extensions for a Web Developer

The Noonification: Can Mankind Survive as an Interplanetary Species? (10/20/2022)

132 Stories To Learn About Performance

3 Golang Pitfalls Every Developer Needs to Know

🤩 24 Coolest VSCode Extensions That Will Rock Your World 🛠

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps