Font Awesome 6 を導入した Rails アプリを Heroku にデプロイしようとしたらコンパイルエラーが発生

概要

ちょっとした管理画面のようなものを

• Rails 6
• Bootstrap 5
• AdminLTE 3
• Font Awesome 6

で作り、Heroku にデプロイしようとしたところ、コンパイルエラーが発生して上手くいきませんでした。

エラーメッセージ一部抜粋

remote:        Compiling...
remote:        Compilation failed:
remote:        Hash: 91480483440872d15a7c
remote:        Version: webpack 4.46.0
remote:        Time: 22411ms
remote:        Built at: 05/01/2022 9:46:35 PM
remote:         3 assets
remote:        Entrypoint application = js/application-3160567dd2dcadb6df42.js js/application-3160567dd2dcadb6df42.js.map
remote:         [71] (webpack)/buildin/module.js 552 bytes {0} [built]
remote:        [111] ./app/javascript/channels/index.js 205 bytes {0} [built]
remote:        [112] ./app/javascript/channels sync _channel\.js$ 160 bytes {0} [built]
remote:        [115] ./app/javascript/stylesheets/application.scss 2.32 KiB {0} [built] [failed] [1 error]
remote:        [116] ./app/javascript/packs/application.js + 56 modules 241 KiB {0} [built]
remote:              | ./app/javascript/packs/application.js 596 bytes [built]
remote:              |     + 56 hidden modules
remote:            + 115 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 30
remote:            at /tmp/build_0f53682a/app/javascript/stylesheets/application.scss:10:1165
remote:            at Parser.error (/tmp/build_0f53682a/node_modules/postcss-values-parser/lib/parser.js:127:11)
remote:            at Parser.operator (/tmp/build_0f53682a/node_modules/postcss-values-parser/lib/parser.js:162:20)
remote:            at Parser.parseTokens (/tmp/build_0f53682a/node_modules/postcss-values-parser/lib/parser.js:245:14)
remote:            at Parser.loop (/tmp/build_0f53682a/node_modules/postcss-values-parser/lib/parser.js:132:12)
remote:            at Parser.parse (/tmp/build_0f53682a/node_modules/postcss-values-parser/lib/parser.js:51:17)
remote:            at parse (/tmp/build_0f53682a/node_modules/postcss-custom-properties/index.cjs.js:47:30)
remote:            at /tmp/build_0f53682a/node_modules/postcss-custom-properties/index.cjs.js:333:24
remote:            at /tmp/build_0f53682a/node_modules/postcss/lib/container.js:194:18
remote:            at /tmp/build_0f53682a/node_modules/postcss/lib/container.js:139:18
remote:            at Rule.each (/tmp/build_0f53682a/node_modules/postcss/lib/container.js:105:16)
remote:            at Rule.walk (/tmp/build_0f53682a/node_modules/postcss/lib/container.js:135:17)
remote:            at /tmp/build_0f53682a/node_modules/postcss/lib/container.js:152:24
remote:            at Root.each (/tmp/build_0f53682a/node_modules/postcss/lib/container.js:105:16)
remote:            at Root.walk (/tmp/build_0f53682a/node_modules/postcss/lib/container.js:135:17)
remote:            at Root.walkDecls (/tmp/build_0f53682a/node_modules/postcss/lib/container.js:192:19)
remote:            at transformProperties (/tmp/build_0f53682a/node_modules/postcss-custom-properties/index.cjs.js:330:8)
remote:            at Object.syncTransform [as plugin] (/tmp/build_0f53682a/node_modules/postcss-custom-properties/index.cjs.js:522:5)
remote:            at /tmp/build_0f53682a/node_modules/postcss-preset-env/index.js:459:97
remote:            at /tmp/build_0f53682a/node_modules/webpack/lib/NormalModule.js:316:20
remote:            at /tmp/build_0f53682a/node_modules/loader-runner/lib/LoaderRunner.js:367:11
remote:            at /tmp/build_0f53682a/node_modules/loader-runner/lib/LoaderRunner.js:233:18
remote:            at context.callback (/tmp/build_0f53682a/node_modules/loader-runner/lib/LoaderRunner.js:111:13)
remote:            at /tmp/build_0f53682a/node_modules/postcss-loader/src/index.js:208:9
remote:         @ ./app/javascript/packs/application.js 5:214-249
remote:        Child mini-css-extract-plugin node_modules/css-loader/dist/cjs.js??ref--6-1!node_modules/postcss-loader/src/index.js??ref--6-2!node_modules/sass-loader/dist/cjs.js??ref--6-3!app/javascript/stylesheets/application.scss:
remote:            Entrypoint mini-css-extract-plugin = *
remote:            [0] ./node_modules/css-loader/dist/cjs.js??ref--6-1!./node_modules/postcss-loader/src??ref--6-2!./node_modules/sass-loader/dist/cjs.js??ref--6-3!./app/javascript/stylesheets/application.scss 1.81 KiB {0} [built] [failed] [1 error]
remote:        
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 myapp.
remote: 
To https://git.heroku.com/myapp.git
 ! [remote rejected] master -> master (pre-receive hook declined)
error: failed to push some refs to 'https://git.heroku.com/myapp.git'

解決方法

タイトルでもチラッと触れている通り、Font Awesome のバージョンが原因でした。

./package.json

{
  "name": "myapp",
  "private": true,
  "dependencies": {
    "@fortawesome/fontawesome-free": "^6.1.1",
    "@popperjs/core": "^2.11.5",
    "@rails/actioncable": "^6.0.0",
    "@rails/activestorage": "^6.0.0",
    "@rails/ujs": "^6.0.0",
    "@rails/webpacker": "5.4.3",
    "admin-lte": "^3.2",
    "bootstrap": "^5.1.3",
    "jquery": "^3.6.0",
    "turbolinks": "^5.2.0",
    "webpack": "^4.46.0",
    "webpack-cli": "^3.3.12"
  },
  "version": "0.1.0",
  "devDependencies": {
    "webpack-dev-server": "^3"
  }
}

根本的な理由はいまいちわかりませんが、どうやら最新のバージョン6を指定したのがダメだったぽいです。

./package.json

- = "@fortawesome/fontawesome-free": "^6.1.1",
+ = "@fortawesome/fontawesome-free": "^5.15.4",

1個古いバージョン5に下げる事で無事コンパイルされるようになりました。

まとめ

以上、Font Awesome 6 を導入した Rails アプリを Heroku にデプロイしようとしたらコンパイルエラーが発生した際の解決方法について記述させていただきました。

大変恐縮なのですが、先述の通り根本的な原因が何なのかはわかりませんでした。（そもそもローカル環境では問題無く動いていましたし）

AdminLTE と Bootstrap5 の組み合わせが悪いのかも？など疑いましたが、それは特に関係無かった模様。

※ AdminLTE は Bootstrap4 をベースに作られているため、可能性として少し考えた次第です。

もし原因についてご存知の方がいらっしゃいましたらコメント欄などでご教授いただけると幸いですm(__)m
自分もわかり次第追記させていただきます。