Are you getting the “Cannot use import statement outside a module” error when you’re importing something?
Here’s the full error message, “Uncaught SyntaxError: Cannot use import statement outside a module”.
The main reason why you’re getting the “Uncaught ReferenceError: ms is not defined” is that modules are scoped.
Since you’re loading the library using native models, “ms” is not accessible in the script tag as it’s not in the global scope.
In other words, you’re trying to run the file independently.
According to the official Node.js documentation, import statements are only permitted in ES modules.
Hence, to fix the “Uncaught SyntaxError: Cannot use import statement outside a module” error message, you need to make Node.js treat your file as an ES module.
The error message can happen on WordPress, TypeScript, JavaScript, and more.
Before you attempt to fix it, you need to make sure that you have the latest version of Node.js.
After that, try using the methods below:
- Method 1: Add type=”module” within the script tag
- Method 2: Add type=”module” in the package.json file
- Method 3: Replace “import” with “require”
- Method 4: Reference typeORM
- Method 5: Replace “esnext” with “commonjs”
Method 1: Add type=”module” within the script tag
Add type=”module” within the script tag.
This will denote that it is a JavaScript module.
Before (wrong):
<script src="../src/main.js"></script>After (correct):
<script type="module" src="../src/main.js"></script>If you’re getting a CORS error from this, you need to add “Access-Control-Allow-Origin: *” in your headers.
Method 2: Add type=”module” in the package.json file
Add “type”: “module” in the nearest parent package.json file.
This will make sure that the .js and .mjs files are denoted as ES modules.
However, if you’re using .ts files, you need to use “nodemon” instead of “node”.
{
// ...
"type": "module",
// ...
}Method 3: Replace “import” with “require”
Try replacing “import { parse } from ‘node-html-parser’;” with “const parse = require(‘node-html-parser’)” or “const parse = require(‘node-html-parser’);”.
// import { parse } from 'node-html-parser';
const parse = require('node-html-parser');Method 4: Reference typeORM
You need to use “dist” and “js” instead of “src” and “ts”.
Before (wrong):
"entities": [
"src/db/entity/**/*.ts",
],After (correct):
"entities": [
"dist/db/entity/**/*.js",
],Method 5: Replace “esnext” with “commonjs”
If you’re encountering the error on TypeScript, you need to do the following:
Instead of:
"target": "esnext",
"module": "esnext",Use:
"target": "esnext",
"module": "commonjs",Conclusion
The “Uncaught SyntaxError: Cannot use import statement outside a module” error is one of the most common errors that developers face.
There are over 1.7 million views of it on StackOverflow.
In most cases, the error message happens because you didn’t include type=”module” inside the script tag.
Including type=module will denote that it is a JavaScript module.
Further reading
How to Fix “Object of Type ‘int’ has no len()”
How to Fix “python: can’t open file ‘manage.py’: [Errno 2] No such file or directory”
