【Rails】ローカル環境のRailsでWebpackerのエラーを解決する【ローカル環境】

Rails
2021.01.06
2024年4月
日 月 火 水 木 金 土
 123456
78910111213
14151617181920
21222324252627
282930  

■ ローカル環境でWebpackerのエラーが出る

Windowsローカル環境で、Railsを使ってherokuへのデプロイをしたいけど、ローカル環境だとWebpacker周りのエラーで上手くいかないという状況に遭遇したので、その時の対処を記事にしようと思います。

Railsチュートリアルを一通り終え、ローカル開発環境で2週目に挑戦したけど、

    • 環境構築が上手くいかない
    • herokuへのデプロイに失敗する

という状況に自分が陥ったので、その時に解決した方法を紹介したいと思います。

Ruby と Railsはインストール済みとします。

★参考サイト
Let’sプログラミング：RubyのダウンロードとインストールTECH PLAY様の記事：Ruby on Rails入門！インストールして使ってみよう！

試してみた環境は
os : Windows10 Home
ruby : 2.7.2p137
Rails : 6.0.3
エディタ : vscode

です。

チュートリアル通りに進めているのに、クラウド環境時では出なかったエラーで困っている方の参考になればと思います。

 

■ 必要なツールのインストール

初めに必要な物をローカル環境に入れていきます。
クラウド環境ではubuntuのコマンドラインからインストールしましたが、
Windows10なのでインストーラーからインストールしていきます。

チュートリアルを参考に3つのツールをインストールします。

・heroku CLI
https://devcenter.heroku.com/articles/heroku-cli
herokuコマンドを実行する際に必要。
Download and installから自分の環境に合ったものをインストールします。

・node.js
https://nodejs.org/ja/download/
yarnのサイトで「yarnをインストールする前に入れておけ」
という情報を見つけたのでインストールします。

・yarn
https://classic.yarnpkg.com/
チュートリアルで使用していたので、こちらもインストールします。
「INSTALL YARN」ボタンよりダウンロードページに行き、インストーラーをゲットします

 

■ 問題と解決

自分の環境ではチュートリアル通りに進めても最後にherokuへのデプロイで失敗しました。
デプロイ時にWebpacker関連のエラーが発生したという内容でした。
どうやらWebpackerのバージョンがよろしくないと言っている。

色々調べると「そんなバージョンのGEMは無いよ」という事っぽい。

さらにエラーをよく読むと
「https://rubygems.org/search?query=webpacker　のサイトを参考にしてね」
という感じのメッセージがありました。

 

そのサイトに行ってみると、どうやらはGEMをインストールする際の本家ような所のようです。
Webpackerのページに行くとGemfileに記述するためのコードをコピーできる場所があるので、
それを利用します。

 

Railsチュートリアル第１章
「リスト 1.18: 追加や並び替えを行ったGemfile」の

 

の行を、サイトからコピーした

 

に置き換えます。

この置き換えを行ったGemfileを保存して

を実行します。

 

後は手順通り、これまでの作業をコミットして

 

を行ないます。

 

自分はこれで無事うまくいきました。

 

■ まとめ

Webpackerのバージョンの問題だったので、
rubygemsのサイトに存在するバージョンをインストールするように
Gemfileの内容を１行置き換えたという解決法でした。

 

Web開発は様々なライブラリなどが複雑に関係するので、一部の機能がバージョンアップしたりするとこの通りには行かないかもしれません。
しかしエラーメッセージを読んだり、そのエラーをｇｇったりしているうちに解決策はきっと見つかります。

 

エラーメッセージは基本的に英語ですが、英語が苦手でもGoogle翻訳やChoromeの翻訳機能を使えば意外に何とかなります。
学生時代、英語の成績がからっきしだった自分でもここまで出来たので、皆さんも恐れることはありません。

日本語訳の文法がおかしくてよくわからないときは、もう一度英語に戻して考え直すと、単語の意味が何となく分かった状態で読めるので
日本語訳を読むより意味をつかみやすい場合もあったりしますので、英語だから無理とあきらめずに読んでみましょう。

 

ここまでで実質、チュートリアル第１章が復習できたことになります。
続きも頑張ります。。

 

■ 参考サイト

Railsチュートリアル：https://railstutorial.jp/

herokuの利用方法（なつめ様の記事）：https://note.com/on_bass/n/n0495484a2b2b

node.jsのダウンロード：https://nodejs.org/ja/download/

yarnのインストーラー：https://classic.yarnpkg.com/ja/docs/install/#windows-stable

rubygems(webpackerにて検索)：https://rubygems.org/search?query=webpacker

コメント

タイトルとURLをコピーしました