🦓
[Rails]Webpacker::Manifest::MissingEntryErrorについて
はじめに
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>
こちらの記事を参考しましたが、エラーが消えなかったです。
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