The ‘cannot use import statement outside module’ error in JavaScript occurs if you are using the ES6 modules syntax in a script that is not loaded as a module. Set the “type” property to “module” in the HTML while loading the script, or add “type”:”module” in package.json in Node.js apps.
cannot use import statement outside module Error In JavaScript
Let’s look at an example to see how this error might occur.
Consider the following HTML file which uses the import statement to load a script containing ES6 modules:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="./script.js"></script>
</head>
<body></body>
</html>The script.js file contains the following code:
import { foo } from ‘./foo.js’;
console.log(foo); // ReferenceError: Cannot use import statement outside a moduleIf you open this file in the browser, you will see the ReferenceError: Cannot use import statement outside a module error in the console.
This is because, by default, the script is not loaded as a module and so the import statement is not recognized. To fix this, set the type property to “module”:
<!DOCTYPE html>
<html>
<head>
<script type="module" src="./script.js"></script>
</head>
<body></body>
</html>Alternatively, you can use a Node.js app and set the “type”:”module” property in package.json:
{
"name": "my-app",
"version": "1.0.0",
"type":"module",
...
}With these changes in place, the import statement will be recognized and the script will run without any errors.
import { foo } from ‘./foo.js’;
console.log(foo); // "bar"Note that when loading a local file, we have to use the .js extension in the import statement. If we omit it, the import will fail.
If a package.json file doesn’t exist in your project, you can create one by running the following command:
npm init -yThe -y flag will automatically fill in the default values for the package.json file.
You can also use the traditional require() statement to load scripts containing ES6 modules, but this is not recommended.
For example:
var foo = require(‘./foo.js’);
console.log(foo); // "bar"While this will work, it is not recommended because it goes against the purpose of using ES6 modules. In addition, the require() statement is not part of the ES6 specification and may be deprecated in future versions of Node.js.
Another common reason why you might be getting the ‘cannot use import statement outside module’ is because you are trying to run the source files that contain the import statements directly. Instead, you should run the compiled files from your build directory.
For example, if you use Babel to compile your source files into a build directory, you would need to run the following command:
node build/main.jsThis will run the main.js file from the build directory which contains the compiled code. Trying to run the source file directly will result in an error because the import statements are not recognized.
To fix this, make sure you are running the compiled files and not the source files.
Conclusion
In this article, we saw how to fix the ‘cannot use import statement outside module’ error in JavaScript. This error can occur if you are using the ES6 modules syntax in a script that is not loaded as a module. To fix this, either set the type property to “module” in the HTML while loading the script, or add “type”:”module” in package.json in Node.js apps.
We also saw how to use the require() statement to load scripts containing ES6 modules, but this is not recommended because it goes against the purpose of using ES6 modules.
Finally, we saw how this error can occur if you are trying to run the source files that contain import statements directly. Instead, you should run the compiled files from your build directory.
With these changes in place, you should be able to fix the ‘cannot use import statement outside module’ error and start using ES6 modules in your JavaScript code.