You may get the error Uncaught Syntaxerror: Cannot Use Import Statement Outside a Module. What is the error? How to fix it? Well, in this page we are going to share some information about that error and how to solve it.
The Uncaught Syntaxerror: Cannot Use Import Statement Outside a Module
This is an Uncaught syntax error. The error is caused because the import statement is ES6 syntax, and node.js understands need module syntax. So, first, you will need to compile your code to es5 and then run the node server file that way, it will work fine.
The import statement is utilized to import bindings which are exported by another module. The Imported modules are in strict mode if you state them as such or not. The import statement cannot be utilized in embedded the scripts unless the script has a type”module”.
Apparently, there are many reasons for the issue mentioned above to occur. For instance, you might have a source file in the src directory instead of the built file in the dist directory. What this means that you are using the native source code in the unaltered or unbundled state, leading to the error. You are able to fix the error by building the script file and importing them. Another issue might be that you are loading the file which utilizes an es6 with normal js files, first you have to compile an es6 and then load the files to fix the error. Simply, you are able to add the type=” module” with the script tag, and the issue was resolved.
How To Fix The Error?
Using the esm module loader
The esm module loader will help us to use the es6 imports in node.js instead of commonJS require function and module.exports. To try using the esm module loader, firstly you have to install it from the npm by running the command below in your terminal.
npm install esm
After that, you have to run the app.js file by adding -r esm flag after the node command.
To enable it, you have to add the type “module” to the package.json file. This way, everything .js and .mjsfiles are interpreted as ES modules. You will be able to interpret individual files as CommonJS by using the .cjsextension. Explicitly name files with the .mjsextension. Other files are going to .jsbe interpreted as CommonJS, which is the default if type not defined in package json.
For node versions 8 to 12, you are able to enable it by passing experimental modules to the node command and then save the file extensions with .mjs.
In fact, there are many reasons for the problem mentioned above to occur. For example, you are able to get a file in the srcdirectory instead of the file created in the dist directory. It means that you are utilizing the native source in an unaltered or unbundled state, which makes the error occur. You will be able to fix the issue by making the script file and importing them.
Another issue is can be that you are loading a file which you use es6 with normal js files. Now, you have to compile the first es6and and then load the files to fix the problem. The error is able to occur if the file you are linking to in your HTML file is a disaggregated version of the file. To get the full version included, you will need to install it with npm:
npm install –save package_to_save
Once you run the above command, you are going to save the package in the node_modules directory and then you are able to link the file in node_modules/package_to_save/dist/file.js
On my daily job, I am a software engineer, programmer & computer technician. My passion is assembling PC hardware, studying Operating System and all things related to computers technology. I also love to make short films for YouTube as a producer. More at about me…