There are a few reasons why the Uncaught syntaxerror: cannot use import statement outside a module may occur, including a total absence of type=”module” attribute or a misplaced dist folder.
There are a number of possible causes for this error, and the solution is dependent on how we invoke the module or script tag in question. We’ll go over each of the scenarios and the solution in detail, using examples to illustrate our points.
How to fix cannot use import statement outside a module error?
This error occurs for three primary reasons. Let’s take a look at each of the reasons below and how you can address them right away.
1. Make Sure “type”: “module” is present In package.json
The most common cause of the uncaught SyntaxError: cannot use import statement outside a module is a missing module type in the package.json file.
You should check your package if you are working on Node.js or react applications and using import statements instead of require to load the modules. As shown below, the JSON document has a property named “type” that is set to “module.”
{
// ...
"type": "module",
// ...
}
2. Add Script Type As Module
Another reason for receiving this error is if we are loading the script from the src directory rather than the built file located in the dist directory of the project.
Because the src file is written in es6 and not a standard js file, it is possible that this will occur. Typically, the dist files will contain the bundled and compiled JavaScript file, and it is therefore recommended to use the dist folder rather than the src folder.
This error can be resolved by simply including the type=”module” attribute in the script, as shown in the example below.
<script type="module" src="Your_Script_Name_With_Path.js"></script> //here src needs to be set to the js file you want to include.
3. Use Import and Require To Load Required Modules
It is possible that we will need to use both import and require statements in order to properly load the module.
import { parse } from 'node-html-parser';
parse = require('node-html-parser');
If you encounter the ReferenceError: require is not defined while working with modules, you will need to use the import syntax instead of the required syntax.
4. Using Bundled Version Using Roll-Up
It appears that you are currently loading the source file from the src directory rather than the built file from the dist directory.
This indicates that you are attempting to use the native source code in its unaltered/unbundled state, which results in the following error message: Uncaught SyntaxError: The import statement cannot be used outside of a module.
Since the package is using rollup to create a bundle, this should be resolved by using the bundled version of the package.
{
//...
"build-amd": "npm run bundle-amd && npm run minify-amd",
//....
}
Wrap Up
I hope you were able to fix the error Uncaught SyntaxError: cannot use import statement outside a module using the reasons and fixes discussed above. I have listed 4 major reasons for this error and it can be fixed easily by making sure that modules are being loaded properly.
If you are still experiencing this problem, please let me know in the comments section and I will be happy to assist you as soon as possible. Or let me know if you know a better method to fix the above error.
If you liked the above tutorial then please follow us on Facebook and Twitter. Let us know the questions and answer you want to cover in this blog.
Further Read:
