【Heroku】デプロイエラーを解決（JisonLexerError / peerDependencies / Precompiling assets failed）

エラー概要

• Herokuのデプロイで以下のエラーが表示された。解決までたどり着いたので、その対応方法を記しておく。

• この中でも、以下に問題があると推測する。

Compilation failed:
JisonLexerError: Lexical error on line 1: Unrecognized text.
Erroneous area:
1: 2 * $table-border-width

• ただし、この辺のエラーメッセージでぐぐっても全然記事がヒットせず...。挫折しそういになるくらい、かなりの時間を浪費しましたので、誰かの一助になればと思います。

原因の追究

• 下にpostcssのことがたくさん記載されているので、そこに"Unrecognized text."が存在しているのか。ただ、postcss.config.jsは以下の通りとなっており、とくにいじった覚えはない。

module.exports = {
  plugins: [
    require('postcss-import'),
    require('postcss-flexbugs-fixes'),
    require('postcss-preset-env')({
      autoprefixer: {
        flexbox: 'no-2009'
      },
      stage: 3
    })
  ]
}

• VSコードでtable-border-widthを全体検索すると、以下がヒット。CALC関係のCSSファイルが悪さしているのかと思ったが、検索結果にそのようなCSSファイルはないよう。

原因

• herokuプッシュ時のログによく見たら

”webpack-dev-server@4.9.2" has unmet peer dependency "webpack@^4.37.0 || ^5.0.0".”

とあり、webpack-dev-serverの依存パッケージに合致（peerDependencies）したwebpackのversionにしておいた方がいいよ、という意味らしいです。（この警告が出てもデプロイできることがあるので見逃されがちらしい）

• 結局、JisonLexerErrorやpostcss-calcが直接何かの原因になっているわけではない？ようです。この辺詳しい方いらっしゃったらぜひコメントください。

解決方法

• package.jsonにてwebpackerのバージョンを以下に変更

package.json

- "@rails/webpacker": "4.3.0",
+ "@rails/webpacker": "^5.1.1",

• 上記変更の後、以下を実行する。

$ yarn install
$ git add yarn.lock
$ git commit -m "Updated Yarn lockfile"
$ git push heroku main

• これで、Precompiling assets failed.も無くなりました。

参考記事

• Precompiling assets failedについての記事：

  • heroku Precompiling assets failed. を解決した方法

• has unmet peer dependencyについての記事：

  • Unmet peer dependencies #1078

• Teratailでも質問しましたが、上記の通り自己解決となりました。

  • Herokuのデプロイエラーを解決したいです（JisonLexerError）