Webpacker::Manifest::MissingEntryErrorエラーの解決策

<h2>開発環境</h2>
Ruby 6.1.5<br>
Rails 3.2.2

<h2>エラー文</h2>

![WebpackerError黒塗り.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3497034/5837eab2-2708-1735-23d3-03eebca79072.png)


```ruby:エラー文
ActionView::Template::Error (Webpacker can't find application.js in C:/Users/○○/Desktop/○○/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:
{
}
):
7:     <%= csp_meta_tag %>
8:
9:     <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
10:    <%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
11:   </head>
```

<h2>事前準備</h2>
<h3>nodeのバージョンの確認</h3>

この方法はnodeのバージョンが16.x系で有効です。コマンドプロンプト（またはターミナル）で

```cmd
node -v
```
を実行し、自分のnodeのバージョンを確認してください。もし別のバージョンを使用しているのであれば、バージョンの変更をしましょう。

Windows用
⇒https://fumidzuki.com/knowledge/4533/

Mac用
⇒https://qiita.com/k3ntar0/items/322e668468716641aa5c

<h2>解決策</h2>
<h3>Gemfileの変更</h3>
GemfileのWebpackerの記述をgem 'webpacker', '5.4.3'に変更しましょう

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3497034/8e1c44c1-5528-e64c-87aa-d4010aae6bee.png)

```diff_ruby
- gem 'webpacker', '~> 5.0'
+ gem 'webpacker', '5.4.3'
```

その後、コマンドプロンプトで
```cmd:cmd
bundle install
```

してください。

<h3>package.jsonの変更</h3>


自分のVSCodeの中のpackage.jsonのdevDependenciesの中に、

```ruby:package.json
    "@babel/plugin-proposal-private-methods": "^7.18.6",
    "@babel/plugin-proposal-private-property-in-object": "^7.21.0",
    "babel-loader": "^8.2.2",

```
を追記してください。

このようになればいいです。

```ruby:package.json
{
  "name": "○○",
  "private": true,
  "dependencies": {
    "@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": {
    "@babel/plugin-proposal-private-methods": "^7.18.6",
    "@babel/plugin-proposal-private-property-in-object": "^7.21.0",
    "babel-loader": "^8.2.2",
    "webpack-dev-server": "3"
  }
}

```

その後、
```cmd:cmd
npm install
```
を実行してください。

<h3>Webpackerのインストール</h3>

コマンドプロンプトで
```cmd:cmd
rails webpacker:install
```
を実行してください。

その後、
```cmd:cmd
rails webpacker:compile
```
を実行してください。これで、Webpackerのエラーが解決すると思います。

<h2>エラー備忘録</h2>

<h3>npm install をしたときにnpm WARNが出る場合</h3>

コマンドプロンプトでnpm installを入力した後、

```
npm WARN config global `--global`, `--local` are deprecated. Use `--location=global` instead
```
という警告文が表示される場合があります。これを解決するには、nodejsの中身を変更する必要があります。これが表示されない人は次の項目に移っていただいて大丈夫です。

エクスプローラ―からnodejsを探し、その中にあるnpm、npm.cmd、npx、npx.cmdのファイルをVSCodeに移して、編集しましょう。
nodejsはC:\Program Files\nodejsにあります。

![スクリーンショット 2023-07-04 095330.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3497034/a939d7c2-c438-1854-eaa0-7c98bee800cf.png)

npmの23行目付近
```diff_ruby
- NPM_PREFIX=`"$NODE_EXE" "$NPM_CLI_JS" prefix -g`
+ NPM_PREFIX=`"$NODE_EXE" "$NPM_CLI_JS" prefix --location=global`
```

npm.cmdの12行目付近
```diff_ruby
- FOR /F "delims=" %%F IN ('CALL "%NODE_EXE%" "%NPM_CLI_JS%" prefix -g') DO (
+ FOR /F "delims=" %%F IN ('CALL "%NODE_EXE%" "%NPM_CLI_JS%" --location=global') DO (
```

npx32行目付近

```diff_ruby
- NPM_PREFIX=`"$NODE_EXE" "$NPM_CLI_JS" prefix -g` 
+ NPM_PREFIX=`"$NODE_EXE" "$NPM_CLI_JS" prefix --location=global`
```

npx.cmd 13行目付近

```diff_ruby
- FOR /F "delims=" %%F IN ('CALL "%NODE_EXE%" "%NPM_CLI_JS%" prefix -g') DO ( 
+ FOR /F "delims=" %%F IN ('CALL "%NODE_EXE%" "%NPM_CLI_JS%" --location=global') DO (
```
この4項目を変更したあと、もう一度npm installを実行すれば、先程のエラーは消えると思います。

<h2>参考文献</h2>

https://qiita.com/tatsuyayamakawa/items/b24794290b0eceb63e06

https://qiita.com/kndknd/items/18187f1c2199651d08d5#%E8%A9%A6%E3%81%97%E3%81%9F%E3%81%93%E3%81%A8webpacker%E3%81%AE%E3%83%90%E3%83%BC%E3%82%B8%E3%83%A7%E3%83%B3%E3%82%92%E7%A2%BA%E8%AA%8D

https://zenn.dev/redheadchloe/articles/3615a4d9bcd8a4