Tengo problemas para importar archivos en JavaScript. Soy bastante nuevo en el lenguaje y he seguido un par de tutoriales de VSCode que demuestran y explican la importación. Su importación parece funcionar de forma inmediata, con un tutorial configurando sus archivos de esta manera, que funcionó para él: 
También me aseguré de configurar mi index.html correctamente para usar las importaciones de módulos ES6. Mi index.html se ve así:
<!DOCTYPE html> <html> <head> <title>JS Modules</title> <script type="module" src="main.js"></script> </head> <body> </body> </html>Pero no importa lo que haga, la única forma en que puedo hacer que VSCode maneje las importaciones y no dé este error
SyntaxError: no se puede usar la declaración de importación fuera de un módulo
es cambiando mis archivos .js a archivos .mjs (lo que hace que mis importaciones funcionen correctamente). Tengo un vago entendimiento de que esto se debe a cómo JS se implementa usando Node en VSCode y Node no funciona bien con las importaciones (?), Pero no estoy completamente claro al respecto.
También he buscado otras preguntas sobre este tema, pero ninguna explica por qué esos videos tutoriales pueden usar importaciones aparentemente listas para usar en VSCode con extensiones de archivo .js cuando no puedo , así que si alguien pudiera arrojar luz sobre esto que sería muy apreciado.
EDITAR: Mi código JavaScript (copiado del video ):
principal.js:
import User from './user.js' const user = new User('Bob', 11); console.log(user)usuario.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}`) }