Webpacker::Manifest::MissingEntryErrorが発生

# はじめに

プログラミングスクールにてRuby on Railsを学習している者です。

アプリケーション作成中に遭遇したエラーと解決に向けて試した方法について、下記に記します。

初学者（学習期間１ヶ月）のため、誤った記述があるかもしれませんが、ご指摘いただけますと幸いです。よろしくお願いいたします。
<br>

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

`rails 6.1.6`で新規アプリ作成中にrails s するも、

**Webpacker::Manifest::MissingEntryError**　が発生

![スクリーンショット 2023-05-31 7.49.32.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3467542/6a247f15-207f-de7c-ff2d-e0629e135eec.png)
<br>


### ※以下、試行錯誤の軌跡を記しますので、解決法探り中の方は、[試したこと⑥](#jump)にお進みください。



## 試したこと①コンパイルしてみる

- webpackerのエラーと思われるため、コンパイルを実施

```ruby
rails webpacker:install
```

```ruby
rails webpacker:compile
```



- 下記エラーが出力される

```ruby
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'
}
```

→解決せず、エラーもわからないのでもう少し調べてみる。
<br>
[参考にした記事]
https://wild-outdoorlife.com/ruby-on-rails/webpack5-error/#toc2

https://prograshi.com/framework/rails/webpackermanifestmissingentryerror/

<br>


## 試したこと②webpackerインストールしてみる

```ruby
bundle exec rails webpacker:install
```


→インストール成功なるも、解決せず。

<br>

## 試したこと③yarnインストール・アップグレードしてみる

↓実行してみたコード

```ruby
yarn
```

```ruby
yarn install
```

```ruby
yarn upgrade
```

```ruby
brew install yarn
```

```ruby
rails install yarn
```

→解決せず。最後の　rails install yarn　については下記エラー出力。わからないので一旦放置。

```ruby
Don't know how to build task 'install' (See the list of available tasks with rails --tasks)
```
<br>
[参考にした記事]

https://qiita.com/masatwork/items/1b5d190cc76f5eeffbb7

<br>


## 試したこと④application.html.erbを編集してみる

Webpacker::Manifest::MissingEntryErrorで指摘されていた箇所のコードを変更

app/views/layouts/application.html.erbにて

```ruby
<%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
```

上記コードを編集

```ruby
<%= javascript_pack_tag    'application' %>
```

→解決せず。

<br>
[参考にした記事]

https://qiita.com/TK_WebSE/items/630ac869d3bbbe93034b



<br>

## 試したこと⑤application.html.erbを編集してみる

app/views/layouts/application.html.erbにて

```ruby
<%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
```

上記コードを削除

→エラー解決されるも、デフォルトの記述を消すのが怖いので他の方法を探る。


<br>

<a id="jump"></a>

## 試したこと⑥nodeのバージョン管理ツールを入れ、コンパイルしてみる

ターミナルで下記を実行

```ruby
npm install -g n
```

```ruby
rails webpacker:compile
```

![スクリーンショット 2023-05-31 13.03.47.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3467542/f2665540-652d-a4bf-2d25-8271be203df1.png)

→解決せず。

①と同じエラーが出てコンパイルできない

やはり、コンパイルした時の下記エラーが気になる。

webpackerコンパイルできればいける気がする。babelがないことが問題？babelって何？

```ruby
Error: Cannot find package '@babel/plugin-proposal-private-methods' imported from /Users/kandamikiko/workspace/instagram_clone_app/babel-virtual-resolve-base.js
```

<br>
[参考にした記事]

https://qiita.com/ginger-yell/items/8584e9149496940ea144

<br>


## 試したこと⑦webpackerのバージョンを確認

- とりあえずbabelって何か調べてみる

https://qiita.com/mzmz__02/items/e6fbe5e30cc3fd13788f

> 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のバージョンを 下記コードに修正（バージョン１個下げてみる）

```ruby
gem 'webpacker', '5.4.3'
```

- さらにbundle実行後、コンパイルを実行

```ruby
rails webpacker:install
```

```ruby
rails webpacker:compile
```

→package.jsonで下記記述が追加され、エラーが解消
```json
"@babel/plugin-proposal-private-methods": "^7.18.6",
```
(↓package.jsonファイル全文）
```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"
  }
}
```

<br>
<br>


# エラー解決し考えたこと

**Webpacker::Manifest::MissingEntryError**　が発生し、webpackerをコンパイルしたところできなかった。エラー内容が『babelがない（？）』というものだったため、webpackerのバージョンを"**5.4.4**"→"**5.4.3**"に下げてみたところエラー解消された。

今回は"**5.4.3**"でうまくいっている方にアドバイスいただき解決したが、バージョンの相性？のようなものがあるのだと勉強になった。
また、**Webpacker::Manifest::MissingEntryError**に遭遇された方の軌跡（記事）を頼りに試行錯誤したが、自分と同じケースに出会うことができなかった。

今後は、エラーコードを読む力とともに、検索能力も向上させていきたい。