はじめに
プログラミングスクールにてRuby on Railsを学習している者です。
アプリケーション作成中に遭遇したエラーと解決に向けて試した方法について、下記に記します。
初学者（学習期間１ヶ月）のため、誤った記述があるかもしれませんが、ご指摘いただけますと幸いです。よろしくお願いいたします。
Railsで一覧画面表示するとエラー発生
rails 6.1.6で新規アプリ作成中にrails s するも、
Webpacker::Manifest::MissingEntryError が発生
※以下、試行錯誤の軌跡を記しますので、解決法探り中の方は、試したこと⑥にお進みください。
試したこと①コンパイルしてみる
- webpackerのエラーと思われるため、コンパイルを実施
rails webpacker:install
rails webpacker:compile
- 下記エラーが出力される
Error: Cannot find package '@babel/plugin-proposal-private-methods' imported from /Users/kandamikiko/workspace/instagram_clone_app/babel-virtual-resolve-base.js
at new NodeError (/Users/kandamikiko/workspace/instagram_clone_app/node_modules/@babel/core/lib/vendor/import-meta-resolve.js:203:5)
at packageResolve (/Users/kandamikiko/workspace/instagram_clone_app/node_modules/@babel/core/lib/vendor/import-meta-resolve.js:873:9)
at moduleResolve (/Users/kandamikiko/workspace/instagram_clone_app/node_modules/@babel/core/lib/vendor/import-meta-resolve.js:902:20)
at defaultResolve (/Users/kandamikiko/workspace/instagram_clone_app/node_modules/@babel/core/lib/vendor/import-meta-resolve.js:985:15)
at resolve (/Users/kandamikiko/workspace/instagram_clone_app/node_modules/@babel/core/lib/vendor/import-meta-resolve.js:999:12)
at resolve (/Users/kandamikiko/workspace/instagram_clone_app/node_modules/@babel/core/lib/config/files/import-meta-resolve.js:13:10)
at tryImportMetaResolve (/Users/kandamikiko/workspace/instagram_clone_app/node_modules/@babel/core/lib/config/files/plugins.js:123:45)
at resolveStandardizedNameForImport (/Users/kandamikiko/workspace/instagram_clone_app/node_modules/@babel/core/lib/config/files/plugins.js:145:19)
at resolveStandardizedName (/Users/kandamikiko/workspace/instagram_clone_app/node_modules/@babel/core/lib/config/files/plugins.js:154:12)
at loadPlugin (/Users/kandamikiko/workspace/instagram_clone_app/node_modules/@babel/core/lib/config/files/plugins.js:47:20)
at loadPlugin.next (<anonymous>)
at createDescriptor (/Users/kandamikiko/workspace/instagram_clone_app/node_modules/@babel/core/lib/config/config-descriptors.js:139:16)
at createDescriptor.next (<anonymous>)
at step (/Users/kandamikiko/workspace/instagram_clone_app/node_modules/gensync/index.js:261:32)
at evaluateAsync (/Users/kandamikiko/workspace/instagram_clone_app/node_modules/gensync/index.js:291:5)
at /Users/kandamikiko/workspace/instagram_clone_app/node_modules/gensync/index.js:44:11
at Array.forEach (<anonymous>)
at Function.async (/Users/kandamikiko/workspace/instagram_clone_app/node_modules/gensync/index.js:43:15)
at Function.all (/Users/kandamikiko/workspace/instagram_clone_app/node_modules/gensync/index.js:216:13)
at Generator.next (<anonymous>)
at createDescriptors (/Users/kandamikiko/workspace/instagram_clone_app/node_modules/@babel/core/lib/config/config-descriptors.js:101:41)
at createDescriptors.next (<anonymous>)
at createPluginDescriptors (/Users/kandamikiko/workspace/instagram_clone_app/node_modules/@babel/core/lib/config/config-descriptors.js:98:17)
at createPluginDescriptors.next (<anonymous>)
at /Users/kandamikiko/workspace/instagram_clone_app/node_modules/@babel/core/lib/gensync-utils/functional.js:21:23
at Generator.next (<anonymous>)
at mergeChainOpts (/Users/kandamikiko/workspace/instagram_clone_app/node_modules/@babel/core/lib/config/config-chain.js:349:34)
at mergeChainOpts.next (<anonymous>)
at chainWalker (/Users/kandamikiko/workspace/instagram_clone_app/node_modules/@babel/core/lib/config/config-chain.js:316:14)
at chainWalker.next (<anonymous>) {
code: 'ERR_MODULE_NOT_FOUND'
}
→解決せず、エラーもわからないのでもう少し調べてみる。
[参考にした記事]
https://wild-outdoorlife.com/ruby-on-rails/webpack5-error/#toc2
試したこと②webpackerインストールしてみる
bundle exec rails webpacker:install
→インストール成功なるも、解決せず。
試したこと③yarnインストール・アップグレードしてみる
↓実行してみたコード
yarn
yarn install
yarn upgrade
brew install yarn
rails install yarn
→解決せず。最後の rails install yarn については下記エラー出力。わからないので一旦放置。
Don't know how to build task 'install' (See the list of available tasks with rails --tasks)
[参考にした記事]
試したこと④application.html.erbを編集してみる
Webpacker::Manifest::MissingEntryErrorで指摘されていた箇所のコードを変更
app/views/layouts/application.html.erbにて
<%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
上記コードを編集
<%= javascript_pack_tag 'application' %>
→解決せず。
[参考にした記事]
試したこと⑤application.html.erbを編集してみる
app/views/layouts/application.html.erbにて
<%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
上記コードを削除
→エラー解決されるも、デフォルトの記述を消すのが怖いので他の方法を探る。
試したこと⑥nodeのバージョン管理ツールを入れ、コンパイルしてみる
ターミナルで下記を実行
npm install -g n
rails webpacker:compile
→解決せず。
①と同じエラーが出てコンパイルできない
やはり、コンパイルした時の下記エラーが気になる。
webpackerコンパイルできればいける気がする。babelがないことが問題？babelって何？
Error: Cannot find package '@babel/plugin-proposal-private-methods' imported from /Users/kandamikiko/workspace/instagram_clone_app/babel-virtual-resolve-base.js
[参考にした記事]
試したこと⑦webpackerのバージョンを確認
- とりあえずbabelって何か調べてみる
Babel(読み方：「バベル」)は、次の世代のJavaScriptの標準機能をブラウザのサポートを待たずに使えるようにするNode.js製のツールである。次の世代の標準機能を使って書かれたコードを、それらの機能をサポートしないブラウザでも動くコードに変換する。簡単に言うと、JavaScriptのコードを新しい書き方から古い書き方に変換するツールである。具体的には、JavaScriptの言語仕様であるES2015以上の仕様のJavaScriptで記述すると、Internet Explorer11といった古いブラウザでは動作しない。そこで、Babelを使ってES2015・ES2016といった仕様で記述したJavaScriptファイルを互換性のあるEXMAScript5に変換する。
→webpackerに入ってそうだがpackage.jsonには記述なし。なぜ入っていない？
- webpackerのバージョンを確認
package.jsonで確認すると、 "@rails/webpacker": "5.4.4", と記述あり
Gemfile見ると、 gem 'webpacker', '~> 5.0’ と記述あり
Gemfile.lockを見ると、 webpacker (5.4.4) と記述あり
- Gemfileにて、webpackerのバージョンを 下記コードに修正（バージョン１個下げてみる）
gem 'webpacker', '5.4.3'
- さらにbundle実行後、コンパイルを実行
rails webpacker:install
rails webpacker:compile
→package.jsonで下記記述が追加され、エラーが解消
"@babel/plugin-proposal-private-methods": "^7.18.6",
(↓package.jsonファイル全文）
{
"name": "instagram-clone-app",
"private": true,
"dependencies": {
"@babel/plugin-proposal-private-methods": "^7.18.6",
"@rails/actioncable": "^6.0.0",
"@rails/activestorage": "^6.0.0",
"@rails/ujs": "^6.0.0",
"@rails/webpacker": "5.4.3",
"turbolinks": "^5.2.0",
"webpack": "^4.46.0",
"webpack-cli": "^3.3.12"
},
"version": "0.1.0",
"devDependencies": {
"webpack-dev-server": "^3"
}
}
エラー解決し考えたこと
Webpacker::Manifest::MissingEntryError が発生し、webpackerをコンパイルしたところできなかった。エラー内容が『babelがない（？）』というものだったため、webpackerのバージョンを"5.4.4"→"5.4.3"に下げてみたところエラー解消された。
今回は"5.4.3"でうまくいっている方にアドバイスいただき解決したが、バージョンの相性？のようなものがあるのだと勉強になった。
また、Webpacker::Manifest::MissingEntryErrorに遭遇された方の軌跡（記事）を頼りに試行錯誤したが、自分と同じケースに出会うことができなかった。
今後は、エラーコードを読む力とともに、検索能力も向上させていきたい。