Zenn
🦓

[Rails]Webpacker::Manifest::MissingEntryErrorについて

2023/06/09に公開
Rails
#
webpacker
tech

はじめに

RailsでWebpacker::Manifest::MissingEntryErrorのエラーが出ましたので、解決するまでやったことをまとめてみました。

Railsで一覧画面表示するとエラー発生

エラー文：

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

Webpacker can't find application.js in /Users/***/heroku_deploy/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:
{
}


# 該当するコード
    <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
    <%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
  </head>

  <body>

こちらの記事を参考しましたが、エラーが消えなかったです。
https://qiita.com/kndknd/items/18187f1c2199651d08d5

rails webpacker:compileでこちらのエラーが出る

Compiling...
Compilation failed:
node:internal/process/promises:245
          triggerUncaughtException(err, true /* fromPromise */);
          ^

Error: Cannot find package '@babel/plugin-proposal-private-methods' imported from /Users/***/heroku_deploy/babel-virtual-resolve-base.js
    at new NodeError

@babel/plugin-proposal-private-methodsのパッケージがないからコンパイルが失敗したとのことで、dependenciesを再度インストールしてみました。

パッケージ（ライブラリ）を再インストールする

# node_modulesを削除する
rm -rf node_modules

npm install
# パッケージをインストールする場合
npm install --save-dev @babel/plugin-proposal-private-methods

package.jsonが更新されたことを確認する

package.json
  "devDependencies": {
    "@babel/plugin-proposal-private-methods": "^7.18.6",
    "webpack-dev-server": "^3"
  }

rails webpacker:compileを再度実行する

コンパイルを再度実行してみると、違うエラーが出ました。
こちらのパッケージ@babel/plugin-proposal-private-property-in-objectがインポートされていますが、package.jsonに記述がないとエラーが発生しました。

Compiling...
Compilation failed:
node:internal/process/promises:245
          triggerUncaughtException(err, true /* fromPromise */);
          ^

Error: [BABEL]: --- PLACEHOLDER PACKAGE ---
This @babel/plugin-proposal-private-property-in-object version is not meant to be imported. Something is importing
@babel/plugin-proposal-private-property-in-object without declaring it in its
dependencies (or devDependencies) in the package.json file.
Add "@babel/plugin-proposal-private-property-in-object" to your devDependencies
to work around this error. This will make this message go away.

package.jsonに記述を追加する

package.json
  "devDependencies": {
    "@babel/plugin-proposal-private-methods": "^7.18.6",
    "@babel/plugin-proposal-private-property-in-object": "^7.21.0",
    "webpack-dev-server": "^3"
  }

npm installを再度実行する

package.jsonを更新したので、もう一度npm installを実行します。
package-lock.jsonを更新されたことも確認します。

npm install

rails webpacker:compileを実行する

bin/rails webpacker:compile

エラーが消えました。ページが表示されました。

manifest.jsonを確認する

JSファイルが見つからないと最初にエラーが出ましたので、コンパイルされていることを確認します。

manifest.json
{
  "application.js": "/packs/js/application-5f7b4eeb39bbcc778fef.js",
  "application.js.map": "/packs/js/application-5f7b4eeb39bbcc778fef.js.map",
  "entrypoints": {
    "application": {
      "js": [
        "/packs/js/application-5f7b4eeb39bbcc778fef.js"
      ],
      "js.map": [
        "/packs/js/application-5f7b4eeb39bbcc778fef.js.map"
      ]
    }
  }
}

webpackerのcacheをクリアする

一度cacheをクリアしてから再compileするのも良いかもしれないです。

bin/rails webpacker:clobber
Removed webpack output path　directory/Users/***/heroku_deploy/public/packs

bin/rails webpacker:compile

本番環境

RAILS_ENV=production bin/webpack

終わりに

Webpacker::Manifest::MissingEntryErrorのエラーを解決でしました。

Discussion