エラー内容

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):

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した

Macbook Air M2のターミナル

% git clone git@github.com:***/***.git

Gemをインストールした

Macbook Air M2のターミナル

% bundle install

webpackerをインストールした

Macbook Air M2のターミナル

% rails webpacker:install

マイグレーションした

Macbook Air M2のターミナル

% rails db:migrate

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

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

結論

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

Macbook Air M2のターミナル

% node -v
v18.12.1

AWS Cloud9のターミナル

$ node -v
v16.19.0

気づいたきっかけ

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

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がインストールされているか確認

% nvm -v

バージョンが表示されればインストール済みです。

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

以下のコマンドは記事を書いた時点でのバージョンなので、最新のnvmにしたい場合はnvmの公式ドキュメントからインストールコマンドをコピーしてきた方が良いでしょう。

% curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.3/install.sh | zsh

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

% nvm -v
0.39.3

一応nvmの各種確認コマンドを載せておきます。

# インストール可能バージョンの確認
nvm ls-remote

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

Node.jsのバージョンを指定（v16.19.0）してインストール

% nvm install v16.19.0

Node.jsのバージョン確認

% node -v
v16.19.0

私の場合はこの時点でバージョンが切り替わっていました。

もしバージョンが変わっていなければバージョンを変更

% nvm use v16.19.0
% node -v
v16.19.0

改めてWebpackerをインストール。

% rails webpacker:install

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

Node.js以外の環境

% 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

参考