ユリタニの独りごと

北海道在住のエンジニアになりたい学生が日々やってきたこと

古いRailsアプリの開発環境を構築し直したらバージョンの組み合わせで躓いた話

古いRailsチュートリアルのサンプルアプリのソースコードを他のPCにコピーし,開発環境を構築し直したところでトラブルに見舞われた.原因は,package.jsonに書かれたWebpackerのバージョンがNode.jsのバージョンとかみ合わず,node-sassのインストールができていないことだった.package.jsonを書き換え,Webpackerのバージョンをアップグレードしたところ,問題は解決した.

環境

  • OS: Ubuntu20.04 LTS
  • Node.js 16.16.0
  • yarn 1.22.9
  • Railsのアプリの場所: ~/rails/sample_app

エラー発生の経緯

Railsの環境構築をしようとする

ソースコードの移動先のPCにて,以下Qiita記事を参考に環境構築を行おうとした.

qiita.com

上の記事に従って,SQLite3などの必要ツールとRubyをインストールした.

qiita.com

上の記事に従って,Railsのインストールを行った.

node-sassがインストールできない

順調に進んでいるかと思ったが,最後にbundle exec rails sでアプリを立ち上げようとした段階で以下のエラーを吐いた.

error Couldn't find an integrity file                                                                                                                                
error Found 1 errors.                                                                                                                                                


========================================
  Your Yarn packages are out of date!
  Please run `yarn install --check-files` to update.
========================================

前のPCからRailsアプリのリポジトリをそのままコピーしてきたからこのエラーが出てきたのかと思い,言われるがままパッケージのアップデートを行おうとする.

$ yarn install --check-files 

しかし,今度は次のようなエラーが出てくる.

yarn install v1.22.19
[1/4] Resolving packages...
[2/4] Fetching packages...
[3/4] Linking dependencies...
warning " > webpack-dev-server@3.11.2" has unmet peer dependency "webpack@^4.0.0 || ^5.0.0".
warning "webpack-dev-server > webpack-dev-middleware@3.7.3" has unmet peer dependency "webpack@^4.0.0 || ^5.0.0".
[4/4] Building fresh packages...
[-/2] ⠁ waiting...
error /home/yuritani/rails/sample_app/node_modules/node-sass: Command failed.
Exit code: 1
Command: node scripts/build.js
Arguments: 
Directory: /home/yuritani/rails/sample_app/node_modules/node-sass
Output:
Building: /usr/local/bin/node /home/yuritani/rails/sample_app/node_modules/node-gyp/bin/node-gyp.js rebuild --verbose --libsass_ext= --libsass_cflags= --libsass_ldflags= --libsass_library=
gyp info it worked if it ends with ok
...以下省略

原因の調査

これによると,インストールするnode-sassがNode.jsとバージョンが合わないときに出てくるらしい.

stackoverflow.com

Node.js 16.16.0に対応するのはnode-sass 6.0らしい.これに従い,node-sass 6.0インストールしようとしたが,エラーに見舞われインストールできなかった.

では,本当の原因はnode-sassのバージョンではなく,node-sassがインストールできない何かしらであるということか?

原因

原因は,package.jsonに記載されていたWebpackerのバージョンが,依存関係にあるnode-sassやNode.jsのバージョンと噛み合っていないことだった.

原因を探るうちに,同じようなエラーに見舞われている以下のQ&Aで気になる記述を見つけた.

peaku.co

I am running Rails 6 and for some reason it was pulling webpacker 4.3.0 which was pulling node-sass 4.3.0 rather than 6.0.0 which is the latest as of the date of this post.


意訳
Rails 6を走らせているが,訳あって この投稿時点で最新のnode-sass6.0.0ではなくnode-sass4.3.0に依存するwebpacker4.3.0が使われている

package.jsonを確認したところ,使用しているWebpackerのバージョンは4.3.0だった.

つまり,今回のエラーの発生状況は以下のようになる.

  1. Webpacker 4.3.0はnode-sass4.3.0に依存
  2. node-sass4.3.0はNode.js 16.16.0に非対応
  3. 私の環境はNode.js 16.16.0を使用しているため,node-sassをインストールできずにエラー発生

対処

参考にしたQ&Aサイトの通り,package.jsonの内容をとりあえず5.3.0書き換え,アップグレードした.

{
...
  "dependencies": {
  ...
    "@rails/webpacker": "5.3.0",
  ...
  }
...
}

あとは,再び yarn install --check-filesを行い,参考のQiita記事のとおりに bundle exec rails sしたところ,正常にアプリが起動した.webpackerの最新バージョンは2022年8月15日現在で6.0.0なので,できればもっと新しいほうがいいかもしれない.

備考

node-sassはdeprecatedらしい.ということで,今回の問題が解決したとしてもnode-sassの置き換えを考えなければいけない.サンプルアプリだからやらないかもしれないが…