開発環境

Ruby 6.1.5
Rails 3.2.2

エラー文

エラー文

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>

事前準備

nodeのバージョンの確認

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

node -v

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

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

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

解決策

Gemfileの変更

GemfileのWebpackerの記述をgem 'webpacker', '5.4.3'に変更しましょう

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

その後、コマンドプロンプトで

cmd

bundle install

してください。

package.jsonの変更

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

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",

を追記してください。

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

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

npm install

を実行してください。

Webpackerのインストール

コマンドプロンプトで

cmd

rails webpacker:install

を実行してください。

その後、

cmd

rails webpacker:compile

を実行してください。これで、Webpackerのエラーが解決すると思います。

エラー備忘録

npm install をしたときにnpm WARNが出る場合

コマンドプロンプトで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にあります。

npmの23行目付近

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

npm.cmdの12行目付近

- 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行目付近

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

npx.cmd 13行目付近

- 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を実行すれば、先程のエラーは消えると思います。

参考文献