node.jsのimport文でつまずいた話

vue.jsの入門中にimport文でつまずいたので備忘としてメモる。

エラーコード

getting_started.js

import { creatApp } from "https://unpkg.com/vue@3/dist/vue.global.js"
import App from './App.vue'
const app = creatApp({
    App
})

出たエラー↓

(node:23304) Warning: To load an ES module, set "type": "module" in the package.json or use the .mjs extension.
(Use `node --trace-warnings ...` to show where the warning was created)
c:\Users\shotaro\Documents\作業場.oridinal\0001_program\js\projects\vue_getting_started\getting_started.js:1
import { creatApp } from 'vue'
^^^^^^

SyntaxError: Cannot use import statement outside a module
    at wrapSafe (node:internal/modules/cjs/loader:1288:20)
    at Module._compile (node:internal/modules/cjs/loader:1340:27)
    at Module._extensions..js (node:internal/modules/cjs/loader:1435:10)
    at Module.load (node:internal/modules/cjs/loader:1207:32)
    at Module._load (node:internal/modules/cjs/loader:1023:12)
    at Function.executeUserEntryPoint [as runMain] (node:internal/modules/run_main:135:12)
    at node:internal/main/run_main_module:28:49

Node.js v20.11.1

解決法

エラーが起きたファイルの拡張子を.mjsにする。

getting_started.mjs

import { creatApp } from "https://unpkg.com/vue@3/dist/vue.global.js"
import App from './App.vue'
const app = creatApp({
    App
})

コードの内容は一切変わっていないが、拡張子が.mjsになったので、エラーが出なくなる。