Back

Technologies:

javascriptjavascript
avatar
Tolerim
a month ago

How do I import a module in JavaScript?

I'm currently encountering the error "Uncaught SyntaxError: Cannot use import statement outside a module" while trying to implement classes in pure JavaScript. Unfortunately, I'm struggling to resolve this issue. The main file for the code is File1.js, while the class file is File2.js. In File1.js, I'm attempting to import a class instance from File2.js using the following code: 

import example from "./file2";

var test = new example();
Here's the code for File2.js, which contains the class instance that I'm trying to import: 

export default class example {
    constructor() {
        console.log("hello world");
    }
}
If you have any insights on how I can fix this error, please let me know. Thank you!
Answers(2)
avatar
Vogi
a month ago
Verified Answer
The error message "Uncaught SyntaxError: Cannot use import statement outside a module" occurs when you try to use the import keyword in a script that is not a module. This error happens because the import statement is only allowed inside ECMAScript modules. To fix this error, you must convert your script to an ECMAScript module. Here are the steps you can follow: 1. Rename your file from .js to .mjs (for example, main.mjs instead of main.js). This tells the browser that the file is a module. 2. Add the type="module" attribute to your script tag in your HTML file. 3. Use the export keyword to export the class instance from File2.js and use the import keyword to import it in File1.js. Here's how you can modify your code: In File1.js: 
import example from "./file2.mjs";

var test = new example();
In File2.mjs: 
export default class example {
    constructor() {
        console.log("hello world");
    }
}
I hope this helps! Let me know if you have any other questions.: AppDividend

Sources

What is JavaScript Import and How to Import Modules - AppDividendCannot Use Import Statement Outside A Module - How To Fix?Next js: Cannot use import statement outside a moduleCan't import OrbitControls.js with Three.js - Stack Overflowvite.config.js - Cannot use import statement outside a module
avatar
Tolerim
a month ago
The error message "Uncaught SyntaxError: Cannot use import statement outside a module" suggests that the JavaScript file is being interpreted by the browser as a script rather than a module. To resolve this error, you can add the "type" attribute to your script tag pointing to the "module" type. Here is an example: 
<script type="module" src="File1.js"></script>
The "type" attribute tells the browser what type of data to expect in the file. In this case, "module" specifies that the JavaScript file should be treated as a module. Keep in mind that not all browsers support the "module" type, so you may need to use a transpiler like Babel to convert your code to something the browser understands.
;