「Webpacker::Manifest::MissingEntryError」への対処

# エラー内容
![スクリーンショット_2023-03-12_23_09_14.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3015071/b9d597e5-739b-fde8-7790-7b682fef7306.png)

```
Webpacker::Manifest::MissingEntryError in ***#***
Showing /***/app/views/layouts/application.html.erb where line #10 raised:

Webpacker can't find application.js in /***/public/packs/manifest.json. Possible causes:
1. You want to set webpacker.yml value of compile to true for your environment
   unless you are using the `webpack -w` or the webpack-dev-server.
2. webpack has not yet re-run to reflect updates.
3. You have misconfigured Webpacker's config/webpacker.yml file.
4. Your webpack configuration is not creating a manifest.
Your manifest contains:
{
}
Extracted source (around line #10):
```

```haml:Extracted source (around line #10):
    <%= stylesheet_pack_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
    <%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
  </head>

  <body>
```


# やっていた操作

- ローカルPC(Macbook Air M2)と異なる開発環境（AWS Cloud9）でRailsアプリケーションを作成した

- Cloud9からGitHubへPushした

- リポジトリをローカルPC上にcloneした
```zsh:Macbook Air M2のターミナル
% git clone git@github.com:***/***.git
```

- Gemをインストールした
```zsh:Macbook Air M2のターミナル
% bundle install
```

- webpackerをインストールした
```zsh:Macbook Air M2のターミナル
% rails webpacker:install
```

- マイグレーションした
```zsh:Macbook Air M2のターミナル
% rails db:migrate
```

- `rails s`を実行し、ブラウザで`http://localhost:3000/`へアクセス

以上の操作で`Webpacker::Manifest::MissingEntryError`エラーが発生しました。


# 結論
Node.jsのバージョンが異なっていたことが原因でした。WebpackerはNode.jsを使用しているためバージョンの違いが影響していたようです。

```zsh:Macbook Air M2のターミナル
% node -v
v18.12.1
```

```bash:AWS Cloud9のターミナル
$ node -v
v16.19.0
```

# 気づいたきっかけ
ターミナルのエラーを見てみたところ、webpackerのコンパイルで失敗していました。

```zsh
Compiling...
Compilation failed:
node:internal/crypto/hash:71
  this[kHandle] = new _Hash(algorithm, xofLen);
                  ^

Error: error:0308010C:digital envelope routines::unsupported
    at new Hash (node:internal/crypto/hash:71:19)
    at Object.createHash (node:crypto:133:10)
    at module.exports (/***/node_modules/webpack/lib/util/createHash.js:135:53)
    at NormalModule._initBuildHash (/***/node_modules/webpack/lib/NormalModule.js:417:16)
    at handleParseError (/***/node_modules/webpack/lib/NormalModule.js:471:10)
    at /***/node_modules/webpack/lib/NormalModule.js:503:5
    at /***/node_modules/webpack/lib/NormalModule.js:358:12
    at /***/node_modules/loader-runner/lib/LoaderRunner.js:373:3
    at iterateNormalLoaders (/***/node_modules/loader-runner/lib/LoaderRunner.js:214:10)
    at iterateNormalLoaders (/***/node_modules/loader-runner/lib/LoaderRunner.js:221:10)
    at /***/node_modules/loader-runner/lib/LoaderRunner.js:236:3
    at context.callback (/***/node_modules/loader-runner/lib/LoaderRunner.js:111:13)
    at /***/node_modules/babel-loader/lib/index.js:44:71
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5) {
  opensslErrorStack: [ 'error:03000086:digital envelope routines::initialization error' ],
  library: 'digital envelope routines',
  reason: 'unsupported',
  code: 'ERR_OSSL_EVP_UNSUPPORTED'
}

Node.js v18.12.1
```

試しにchatGPTに聞いてみたところ、
>このエラーは、Node.jsのバージョンが古いために起こっている可能性があります。Node.jsの最新バージョンをインストールすることで解決することができます。

Node.jsのバージョンはむしろCloud9より新しいのですが、どうやらWebpackerが使用しているNode.jsのバージョンが影響していることはこれでわかりました。

# 対処
ローカルPC(Macbook Air M2)のNode.jsバージョン(`v18.12.1`)をCloud9と同じバージョン(`v16.19.0`)にダウングレードしました。以下が手順です。`nvm`というNode.jsのバージョン管理ツールを使用します。

- まず`nvm`がインストールされているか確認
```zsh
% nvm -v
```
バージョンが表示されればインストール済みです。

- `nvm`がインストールされていない場合はインストールする

以下のコマンドは記事を書いた時点でのバージョンなので、最新のnvmにしたい場合は[nvmの公式ドキュメント](https://github.com/nvm-sh/nvm#install--update-script)からインストールコマンドをコピーしてきた方が良いでしょう。
```zsh
% curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.3/install.sh | zsh
```

- ターミナルを再起動して、nvmがインストールされたか確認
```zsh
% nvm -v
0.39.3
```

一応nvmの各種確認コマンドを載せておきます。
```zsh
# インストール可能バージョンの確認
nvm ls-remote

# インストール済みのnodeのバージョン一覧を表示
nvm ls
```


- Node.jsのバージョンを指定（v16.19.0）してインストール
```zsh
% nvm install v16.19.0
```

- Node.jsのバージョン確認
```zsh
% node -v
v16.19.0
```
私の場合はこの時点でバージョンが切り替わっていました。

- もしバージョンが変わっていなければバージョンを変更
```zsh
% nvm use v16.19.0
% node -v
v16.19.0
```

- 改めてWebpackerをインストール。
```zsh
% rails webpacker:install
```

以上でエラーが解消されました。

# Node.js以外の環境
```zsh
% ruby -v
ruby 3.1.2p20 (2022-04-12 revision 4491bb740a) [arm64-darwin22]
% rails -v
Rails 6.1.7
% bin/webpack -v
4.46.0
% nvm -v
0.39.3
```


# 参考

https://c-limber.co.jp/blog/2610