背景
学習の教材を終えて自分でオリジナルアプリを作っていた。
環境
PC：MacOS
フロントエンド:HTML/CSS/SCSS/Javascript
フレームワーク:Bootstrap5.2.0/Jquery3.6.0
バックエンド:Ruby 2.6.5
フレームワーク:Ruby on Rails 6.0.5.1
インフラ:Heroku-18 stack
エラー内容
remote: rake aborted!
remote: NoMethodError: undefined method `size' for nil:NilClass
remote: /tmp/build_fe25ab3a/vendor/bundle/ruby/2.6.0/gems/sass-3.7.4/lib/sass/util.rb:157:in `merge_adjacent_strings'
※以下省略・・・
remote: Tasks: TOP => assets:precompile
remote: (See full trace by running task with --trace)
remote:
remote: !
remote: ! Precompiling assets failed.
remote: !
remote: ! Push rejected, failed to compile Ruby app.
remote:
remote: ! Push failed
remote: Verifying deploy....
remote:
remote: ! Push rejected to 〇〇
remote:
To https://git.heroku.com/〇〇
! [remote rejected] master -> master (pre-receive hook declined)
error: failed to push some refs to 'https://git.heroku.com/〇〇'
ローカルでの挙動は問題なしでしたが、本番環境にデプロイできず。
対処法
app/assets/stylesheets/application.cssに書いてあった以下の2行を削除。
*= ./bootstrap_import
*= require bootstrap/dist/css/bootstrap.min.css
最初にBootstrapを導入した際にassetsに入れるやり方でやっていたが、後からwebpackerで入れ直したくなり導入の仕方を変更したという経緯があった。
上記の2行はassetsで導入した際に記述したものと思われ、これを放置したまま進めていた。この2行を削除したところNoMethodError: undefined method `size' for nil:NilClassというエラーは消える。変更したなら以前に書いた余計な記述は削除すべきと反省。。。
新たなエラー発生
Compiling...
remote: Compilation failed:
remote: Hash: 594cbab4845bd3ed32de
remote: Version: webpack 4.46.0
remote: Time: 14998ms
remote: Built at: 09/08/2022 2:50:05 PM
remote: 3 assets
remote: Entrypoint application = js/application-07a8ac10d4b34c6d4622.js js/application-07a8ac10d4b34c6d4622.js.map
remote: [4] ./app/javascript/channels/index.js 205 bytes {0} [built]
remote: [5] ./app/javascript/channels sync _channel\.js$ 160 bytes {0} [built]
remote: [6] ./app/javascript/stylesheets/application.scss 2.32 KiB {0} [built] [failed] [1 error]
remote: [7] ./app/javascript/packs/application.js + 58 modules 212 KiB {0} [built]
remote: | ./app/javascript/packs/application.js 836 bytes [built]
remote: | + 58 hidden modules
remote: + 7 hidden modules
remote:
remote: ERROR in ./app/javascript/stylesheets/application.scss
remote: Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
remote: ModuleBuildError: Module build failed (from ./node_modules/postcss-loader/src/index.js):
remote: ParserError: Syntax Error at line: 1, column 38
※以下省略
エラー文にある通り./app/javascript/stylesheets/application.scssに記述した内容@import '~bootstrap/scss/bootstrap';が読み込めていないのだろうかと考えた。しかし今更Bootstrapを消すのもめんどくさい。
対処方法
ターミナルにて下記コマンドでBootstrapのバージョンを5.2.0から5.1.3にダウングレード。
yarn upgrade bootstrap@5.1.3
ダウングレードですがコマンドはupgradeと書かねばならないのはややこしい。
これでデプロイはひとまずうまくいきました。
まとめ
今回のエラーに遭遇したとき、ネットで調べても同じような事例が少なく10日以上も一人で悩んでしまい途方に暮れてしまったというのと、情報の収集の仕方や見極め方をもっと気をつけたほうがいいと考え色々と反省しきりです。（古い情報を見てそのやり方を実行してしまったり、見当違いな対応をしてしまったりなど）
様々な教訓を得られたエラーとの格闘でした。