はじめに
今回は、前回に引き続きRubyでアプリケーション開発する流れを確認していきたいと思います。
メッセージングアプリの作成を通して、基本的な機能を構築していきます。
前回まででパッケージのインストール等環境構築を実施しました。
本記事では、Railsでアプリケーションのページ作成を行う上で、View作成時に発生したエラーの対処方法を確認していこうと思います。
流れ
以下のような流れで実施してきました。
後半の機能実装については、順次検討して進めていきます。
どんなWebアプリケーションにもある基本的な機能の実装から進めていきますが、今回は、そのなかで発生したエラーについて確認します。
- 環境構築
- パッケージのインストール
- Homebrew
- rbenv
- ruby
- bundler
- yarn
- rails
- PostgreSQL
- プロジェクトの作成
- Railsアプリケーションの作成
- データベースの作成
- サーバー起動と稼働確認
- アセットパイプラインと画像の配置
- 画像を取得
- 画像を指定のディレクトリに保存
- 設定ファイルを更新
- パッケージのインストール
- トップページの作成
- MVCとは?
- Viewの作成
- webpackerコンパイルにおけるエラー対処[⭐️本記事の内容]
- ルーティングとは?
- 認証機能の実装
- etc…
Viewの作成
Controllerの作成に伴い、トップページ表示用にViewでもトップページを追加しました。
しかし、この後サーバーで確認しようとしても以下のエラーが出力されますので、こちらの対応履歴として残していこうと思います。
Webpacker::Manifest::MissingEntryError in Top#index
まずこのエラーは、Webpackerがアプリケーションのアセット(JavaScriptファイル)を見つけられないことを示しています。具体的には、application.js
ファイルがpublic/packs/manifest.json
に存在しないことが原因です。
対処方法
以下のような事項を実施しました。詳細は後述します。
rails webpacker:compile
を実行し、エラーメッセージを確認node
のバージョンを確認して変更yarn
のバージョンを確認して変更
rails webpacker:compileを実行し、エラーメッセージを確認
多くの場合、このwebpackerが悪さをしているかもしれません。この仕組み自体は良いのですが、最新版では使用されていない機能のため、他のパッケージのみが最新であると依存関係に問題が出ていることが原因となっている可能性があります。
以下のコマンドでこまめにcompileしてエラーを表示しながら原因を探っていきます。
# webpackerをコンパイルしてエラーがあれば確認する
rails webpacker:compile
yarn add --dev webpack-dev-server
yarn upgrade @rails/webpacker webpack webpack-cli webpack-dev-server
./bin/webpack --debug-webpacker
bin/webpack-dev-server
全体の流れとしては以下の順でコマンドを実行して対処していきます。
# 関連するパッケージのバージョンを確認
$ rails webpacker:info
Ruby: ruby 2.7.2p137 (2020-10-01 revision 5445e04352) [arm64-darwin23]
Rails: 6.0.6.1
Webpacker: 4.3.0
Node: v18.20.4
Yarn: 1.22.22
@rails/webpacker:
rails_app_1st@0.1.0 /Users/username/dev/app-test-run/rails-app/rails-app-1st
`-- @rails/webpacker@5.4.4
Is bin/webpack present?: true
Is bin/webpack-dev-server present?: true
Is bin/yarn present?: true
# webpackerを最新バージョンにアップデートする
bundle update webpacker
#####
# Webpackの設定ファイルを更新する
# config/webpack/environment.jsファイルを開き、node の設定を確認して、
# 問題のある設定(dgram, fs, net, tls, child_process)を削除または修正する。
# もし上記の設定が見つからない場合は、config/webpack/production.js
# (または開発環境の場合は development.js)を確認して修正する。
#####
# webpackerの設定をリセットする
rails webpacker:install
# Node.jsとYarnのバージョンを確認する
node --version
yarn --version
# yarnを再インストールする
yarn install
# エラーが解消されたか(または別のエラーに変わったか)を確認する
raisl webpacker:compile
yarn及びnodeを一度綺麗にしたい際は、下記のコマンドを使用します。
# yarnのcacheを削除する
yarn cache clean
# node関連のモジュールを削除する
rm -rf node_modules
# yarnを最新バージョンにアップデートする
yarn install
nodeのバージョンを確認して変更
私の環境では、voltaを使用してnode22.4.1を使用していたため、こちらを安定版の18に落とすための作業を行いました。
具体的には以下の通りです。
# nodeのバージョンを確認
$ node --version
v22.4.1
# node18をインストール
$ volta install node@18
success: installed and set node@18.20.4 as default
note: this version of Node includes npm@10.7.0, which is higher than your default version (9.2.0).
To use the version included with Node, run `volta install npm@bundled`
# node18を使用する
$ volta pin node@18
success: pinned node@18.20.4 (with npm@10.7.0) in package.json
# デフォルトnodeバージョンが更新されたことを確認
$ node --version
v18.20.4
しかし、後ほどrails6及びwebpackerと良好に動作するのは、node14ということがわかりさらにバージョンを落としました。。
# nodeのバージョンを確認
$ node --version
v18.20.4
# node18をインストール
$ volta install node@18
success: installed and set node@14.21.3 as default
note: you are using node@18.20.4 in the current project
# node18を使用する
$ volta pin node@14
success: pinned node@14.21.3 (with npm@6.14.18) in package.json
# デフォルトnodeバージョンが更新されたことを確認
$ node --version
v14.21.3
nodeを複数のパッケージマネージャで管理している場合は、別バージョンをインストールしても使用バージョンが更新されない場合があります。
その場合は、以下のコマンドで優先されているパッケージマネージャを確認して必要に応じて設定ファイル(.bashrc
、.zshrc
、.bash_profile
など)を編集しましょう。
# 使用しているnodeパッケージマネージャを確認
$ which node
/opt/homebrew/bin/node
# 優先度を変更する
$ vi ~/.zshrc
# 変更を適用する
$ source ~/.zshrc
# 優先されるnodeパッケージマネージャが変更されたことを確認
$ which node
/Users/username/.volta/bin/node
yarnのバージョンを確認して変更
yarnのバージョンも確認して1.16.0に変更しておきましょう。
$ yarn -v
1.22.22
$ volta install yarn@1.16.0
success: installed and set yarn@1.16.0 as default
$ yarn -v
1.16.0
まとめ
今回は、webpacker使用時に発生したトラブルに対処した内容を備忘的に残しました。
ですが、非推奨バージョンのパッケージも多く、さらに難航しそうですね。。場合によっては、rails7で作り直すことも視野に入れつつ進めていきます。
コメント