【デプロイ失敗】@babel/plugin-proposal-class-propertiesについて

Question

デプロイ時のおけるエラーを解決してデプロイ したい

初めまして初心者です。

ただいまRubyを使って簡単な画像投稿アプリを作成しています。
デプロイを行おうとした際に下記のエラーメッセージが出ました。

発生している問題・エラーメッセージ

herokでデプロイをしようとした際に下記のエラーが出ました
（前提としてこのアプリのデプロイは何度か実行して成功しています）

ターミナル上でのエラ〜メッセージ

% heroku logs
で原因を探るとどうやらBuildに失敗しているようでした。

2021-06-02T00:44:26.002809+00:00 heroku[web.1]: Stopping all processes with SIGTERM
2021-06-02T00:44:26.087980+00:00 app[web.1]: - Gracefully stopping, waiting for requests to finish
2021-06-02T00:44:26.088956+00:00 app[web.1]: === puma shutdown: 2021-06-02 00:44:26 +0000 ===
2021-06-02T00:44:26.088958+00:00 app[web.1]: - Goodbye!
2021-06-02T00:44:26.089120+00:00 app[web.1]: Exiting
2021-06-02T00:44:26.194056+00:00 heroku[web.1]: Process exited with status 143
2021-06-02T01:09:42.000000+00:00 app[api]: Build started by user ****@icloud.com
2021-06-02T01:10:37.000000+00:00 app[api]: Build failed -- check your build output: https://dashboard.heroku.com/apps/73fd92a9-87d1-4084-806d-52e7542b8b6d/activity/builds/2b176a28-b659-4349-a593-423f36f1097b
2021-06-02T01:11:20.492603+00:00 heroku[web.1]: Unidling
2021-06-02T01:11:20.508363+00:00 heroku[web.1]: State changed from down to starting

ですのでherokuのBuildのログを確認しますと

"loose" mode option was set to "true" for @babel/plugin-proposal-class-properties.
       The "loose" option must be the same for @babel/plugin-proposal-class-properties, @babel/plugin-proposal-private-methods and @babel/plugin-proposal-private-property-in-object (when they are enabled): you can silence this warning by explicitly adding
       	["@babel/plugin-proposal-private-methods", { "loose": true }]
       to the "plugins" section of your Babel config.
       Though the "loose" option was set to "false" in your @babel/preset-env config, it will not be used for @babel/plugin-proposal-private-methods since the "loose" mode option was set to "true" for @babel/plugin-proposal-class-properties.
       The "loose" option must be the same for @babel/plugin-proposal-class-properties, @babel/plugin-proposal-private-methods and @babel/plugin-proposal-private-property-in-object (when they are enabled): you can silence this warning by explicitly adding
       	["@babel/plugin-proposal-private-methods", { "loose": true }]
       to the "plugins" section of your Babel config.
       Though the "loose" option was set to "false" in your @babel/preset-env config, it will not be used for @babel/plugin-proposal-private-methods since the "loose" mode option was set to "true" for @babel/plugin-proposal-class-properties.
       The "loose" option must be the same for @babel/plugin-proposal-class-properties, @babel/plugin-proposal-private-methods and @babel/plugin-proposal-private-property-in-object (when they are enabled): you can silence this warning by explicitly adding
       	["@babel/plugin-proposal-private-methods", { "loose": true }]
       to the "plugins" section of your Babel config.
       
 !
 !     Precompiling assets failed.
 !
 !     Push rejected, failed to compile Ruby app.
 !     Push failed

と確認でいました。
つまり
【@babel/plugin-proposal-class-properties の "loose" モード オプションが "true" に設定しなおせば解決する】
と認識しました（この前提が誤っていた場合ご指摘頂けると幸いです）

ここでご質問なのですがどうすれば@babel/plugin-proposal-class-properties を設定できるのでしょうか？

この【Babel】というファイルを作成した記憶がなく、調べたところ
Babel作成方法は見つけたのですが、これはこちらで作成して変更すれば良いのでしょうか？

そもそも、エラー原因の対処法がこれであっているのかもわからず、ご教授いただけますと幸いです。

Comments

[lohn]

webpackerは使っていますか？使っている場合はバージョンも教えて下さい

[pais]

lohnさんありがとうございます。
％webpack --version
zsh: command not found: webpack
と結果が出た為、webpackが見つからないと出ています。

しかし、webpacker.ymlといったファイルは存在しています。

[lohn]

webpackではなく、gemのwebpackerですね。
https://github.com/rails/webpacker

[lohn]

babel.config.jsはありますか？

[pais]

lohnさん
失礼しました、webpackerは 4.0でした。

Answer 1

• webpackerでは@babel/plugin-proposal-class-propertiesにloose: trueを設定しているが、@babel/plugin-proposal-private-methodsには何も設定されていないため、初期値のloose: falseが設定されている
• エラーメッセージを読むと、 @babel/plugin-proposal-class-properties, @babel/plugin-proposal-private-methods, @babel/plugin-proposal-private-property-in-object はそれぞれlooseの値が同じで無ければならない

ちょうど質問と同様のissueがあがっているようです。
https://github.com/rails/webpacker/issues/3008

• JSのクラス内で、プライベートメソッド/フィールドを使用している場合に発生する

なので解決策としては、

1. プライベートメソッド/フィールドの使用をやめる
2. babelの設定を投入する

のいずれかで解決すると思います。

babelの設定については、 babel.config.js 内のpluginsの中に下記設定を追加すればよいかと

["@babel/plugin-proposal-private-methods", { "loose": true }]

(エラーメッセージにも書かれている内容ですね)

Comments

[pais]

ご教授いただきありがとうございます。
無事エラー解消いたしました。
丁寧な解説重ねて感謝いたします。