Self-Curation

新卒社会人で営業マンになりました

【Rails new】webpacker・node・yarnのエラーと対処法

f:id:scuration:20200510200729p:plain

Ruby(Rails)がエラーで上手く動作しないので再インストールを行いました。

すると以前はrails newを実行したときに出なかったwebpacker関連のエラーが表示されるようになりました。

本記事ではこのエラーの対処法について書かせていただきます。

【目次】

webpacker・yarn・node.jsとは?

私は本件でwebpacker、yarn、node.jsなるものを始めて知ったので、まずそれらの概要を書かせていただきます。

まずwebpackerというのはgemの1つであり、javascriptをいい感じにRuby on rails に組み込む機能の集合体的なもの。

どうやらRails6.0からrails newでwebpackerも標準でインストールされるようになったらしく、javascriptとかその段階にいってない初心者にはいい迷惑かもしれない…?

またwebpackerについて検索して調べてみると「フレームワークに沿った開発には便利なものの、それが逆に使いづらい」といった理由から辞めた人もいるようです。まぁ私レベルの初心者には当分縁のない話でしょう。

Node.jsというのはサーバーサイドで動くjavascriptの1種で、yarnというのはnpm(=NodePackageManager)に代わるjsパッケージマネージャ。node.jsのインストール時にnpmは一緒にインストールされるようだが、yarnは自分でインストールしなければならない。

改めてrails newでwebpackerのエラーが起こる問題を分解すると



【問題点】
・Rails6.0から新規アプリ作成時にwebpackerが標準でインストールされるようになった
・webpackerで使用されるサーバーサイドjavascriptはNode.js
・webpackerで使用するnode.jsはnpmではなくyarnを使う


【解決策】
・webpacker、Node.js、yarnをそれぞれインストール!



ということになる。

【エラー1】webpackerがインストールされていない

configuration file not found C:/Ruby26-x64/sample/config/webpacker.yml. Please run rails webpacker:install

まず上記のエラーが生じました。

「rails webpacker:install」を走らせてと書いてあるのでターミナルで以下のコマンドを実行します。

$ rails webpacker:install

すると文字列がブワーッって出てきて最終的に以下の文言が表示されていると思います。

Example:
    rails new ~/Code/Ruby/weblog

    This generates a skeletal Rails installation in ~/Code/Ruby/weblog.

webpackerがちゃんとインストールされたのかどうか分かりませんがもう一度rails newを実行してみます。

【エラー2】node.jsがインストールされていない

指示通りにwebpacker:installを実行して再度rails newを実行すると以下のように怒られます。

 rails  webpacker:install
'node' は、内部コマンドまたは外部コマンド、
操作可能なプログラムまたはバッチ ファイルとして認識されていません。
'nodejs' は、内部コマンドまたは外部コマンド、
操作可能なプログラムまたはバッチ ファイルとして認識されていません。
Node.js not installed. Please download and install Node.js https://nodejs.org/en/download/

こちらについても親切にURLまで教えてくださってるのでリンク先からnode.jsをダウンロードしてインストールしましょう。

Download | Node.js

インストールしてもそのままだと状況は変わらないのでコンピュータを再起動してください。

【エラー3】yarnがインストールされていない

再びrails newを実行するとyarnがインストールされていない、見つからない的なエラーが出ると思います。

Yarn not installed. 
Please download and install Yarn from https://yarnpkg.com/lang/en/docs/install/

こんな感じで表示されるので教えてくれたURLからyarnをダウンロード、インストールしましょう。

Installation | Yarn

エラーが発生せずにアプリを新規作成できるようになった!

f:id:scuration:20200510190507p:plain

$ rails new sample

上記コマンドでRailsアプリの新規作成が成功し、「rails s」を実行してもきちんと表示されました。

同じ目に遭っている方がいたら参考になれば幸いです。