0
207
VistasImport in VSCode without using .mjs files
I'm having trouble importing files in JavaScript. I am fairly new to the language and have followed a couple of VSCode tutorials that demonstrate and explain importing. Their importing seems to work out of the box, with one tutorial setting up his files like this, which worked for him:
I also made sure to set up my index.html properly to use ES6 module imports. My index.html looks like this:
<!DOCTYPE html>
<html>
<head>
<title>JS Modules</title>
<script type="module" src="main.js"></script>
</head>
<body>
</body>
</html>But no matter what I do, the only way I can get VSCode to handle imports and not give this error
SyntaxError: Cannot use import statement outside a module
is by changing my .js files to .mjs files (which makes my imports function properly). I have a vague understanding that this is because of how JS is implemented using Node in VSCode and Node does not play nicely with imports(?), but am not completely clear on that.
I have also browsed other questions about this topic, but none explain why those tutorial videos are able to use imports seemingly out-of-the-box in VSCode with .js file extensions when I cannot, so if someone could shed light on this that would be much appreciated.
EDIT: My JavaScript code (copied from video):
main.js:
import User from './user.js'
const user = new User('Bob', 11);
console.log(user)
user.js:
export default class User {
constructor(name, age) {
this.name = name;
this.age = age;
}
}
export function printName(user) {
console.log(`User's name is ${user.name}`)
}
export function printAge(user) {
console.log(`User's age is ${user.age}`)
}