JavaScript: Warning: To load an ES module, set “type”: “module” in the package.json or use the .mjs extension. への対応(備忘録)

前回のエントリでJavaScriptの環境を整えたので、.jsのファイルを実行出来る様になっています。

1ファイルでの処理は出来る様になったが、そもそもの目的は複数ファイルに跨がったプログラムの実行をする事。

早速のエラー
package.jsonの準備
やっぱり出てくるエラー、でもそこから分かったこと。

早速のエラー

早速複数ファイル、フォルダに分けた簡単なプログラムを実行した所、下記エラーメッセージが出た。

% node script.js 
(node:****) 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)
/Users/ユーザー名/~Psample/files/script.js:36
import { dog1, dog2 } from "./data/dogData.js";
^^^^^^

SyntaxError: Cannot use import statement outside a module
    at Object.compileFunction (node:vm:352:18)
    at wrapSafe (node:internal/modules/cjs/loader:1031:15)
    at Module._compile (node:internal/modules/cjs/loader:1065:27)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1153:10)
    at Module.load (node:internal/modules/cjs/loader:981:32)
    at Function.Module._load (node:internal/modules/cjs/loader:822:12)
    at Function.executeUserEntryPoint [as runMain] (node:internal/modules/run_main:81:12)
    at node:internal/main/run_main_module:17:47

何はともあれ、
SyntaxError: Cannot use import statement outside a module
と言う事らしい。

早速”Warning: To load an ES module, set “type”: “module” in the package.json or use the .mjs extension.”でグーグル先生に質問して色々見せて頂きました。

まずは”package.json”を準備してそこに”type”: “module”をセットしてみる。

package.jsonの準備

ターミナルでJavaScriptの実行フォルダがあるフォルダに行き、そこでnpm initを実行。

と言いますか、このnpm init, JavaScriptをnodeで実行する際、最初に必要な処理みたいですね。これで作られるpackage.jsonでそこで作っているパッケージを管理します。
開発前の下ごしらえ(npm init)

npm init を打つと下記の通り出力される。

% npm init
This utility will walk you through creating a package.json file.
It only covers the most common items, and tries to guess sensible defaults.

See `npm help init` for definitive documentation on these fields
and exactly what they do.

Use `npm install <pkg>` afterwards to install a package and
save it as a dependency in the package.json file.

Press ^C at any time to quit.
package name: (files) 
version: (1.0.0) 
description: 
entry point: (script.js) 
test command: 
git repository: 
keywords: 
author: 
license: (ISC) 
About to write to /Users/ShujiKatoMBPro/Dropbox/0_Udacity/0_Full_Stack_Web_Developer/Playground/JS_Playground/Progate_sample/files/package.json:

{
  "name": "files",
  "version": "1.0.0",
  "description": "",
  "main": "script.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}


Is this OK? (yes) yes

Press ^C at any time to quit.
package name: (files)

からはリターンを連打すれば進んでいく。

フォルダをみるとこんなpackage.jsonファイルが出来ていた。

{
  "lockfileVersion": 1
}

この中に
“type”: “module”
を追記してJavaScriptファイルを実行してみる。

やっぱり出てくるエラー、でもそこから分かったこと。

上手く行ったかな？と思ったものの、下記エラーがでる。
でもエラーは友達。中身を読んでみよう。

% node script.js 
node:internal/process/esm_loader:94
    internalBinding('errors').triggerUncaughtException(
                              ^

Error [ERR_MODULE_NOT_FOUND]: Cannot find module '/Users/ShujiKatoMBPro/Dropbox/0_Udacity/0_Full_Stack_Web_Developer/Playground/JS_Playground/Progate_sample/files_npm/data/dogData' imported from /Users/ShujiKatoMBPro/Dropbox/0_Udacity/0_Full_Stack_Web_Developer/Playground/JS_Playground/Progate_sample/files_npm/script.js
Did you mean to import ../data/dogData.js?
    at new NodeError (node:internal/errors:371:5)
    at finalizeResolution (node:internal/modules/esm/resolve:416:11)
    at moduleResolve (node:internal/modules/esm/resolve:932:10)
    at defaultResolve (node:internal/modules/esm/resolve:1044:11)
    at ESMLoader.resolve (node:internal/modules/esm/loader:422:30)
    at ESMLoader.getModuleJob (node:internal/modules/esm/loader:222:40)
    at ModuleWrap.<anonymous> (node:internal/modules/esm/module_job:76:40)
    at link (node:internal/modules/esm/module_job:75:36) {
  code: 'ERR_MODULE_NOT_FOUND'
}

あれ、
Cannot find module〜Did you mean to import ../data/dogData.js?
と聞かれてる。

元々プロゲートで学びながらそこで書いたコードを保存していたので、モジュール名に拡張子を付けていなかった。
Mac上でnodeで実行する際には拡張子が必要なのかも知れない。

因みに、本来はこの拡張子”.js”は省略しても問題無い。

と言う事でimport ~ from ~のfromの所のファイル名に拡張子”.js”を追加して実行すると

おお、きちんと出力された。
そう、プロゲートのあのコースのあの出力です。

ShujiKatoMBPro@mbp2015early [23:59:32] [~/Dropbox/0_Udacity/0_Full_Stack_Web_Developer/Playground/JS_Playground/Progate_sample/files_npm] 
-> % node script.js
---------
こんにちは
名前はレオです
犬種はチワワです
4歳です
人間年齢で28歳です
---------
こんにちは
名前はベンです
犬種はプードルです
2歳です
人間年齢で14歳です

拡張子の違いはあるけれど、これでJavaScriptの環境が更に整った。

今回参考にさせて頂いた記事は下記になります。

「package.json」って何？って時に少し調べた時のノート
 いまさら聞けない！npmのこれだけは知っておきたい基礎知識

情報共有感謝。