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>

Lessons in this unit:

0:	Introduction
1:	▶︎ How to fix "cannot use import statement outside a module"
2:	How to fix "__dirname is not defined in ES module scope"
3:	How to fix the error "unexpected token "{". import call expects exactly one argument"
4:	How to enable ES Modules in Node.js
5:	How to use .env files in Node.js with import syntax
6:	How to use import in Node.js
7:	Expose functionality from a Node file using exports