質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.53%
Babel

Babelは、JavaScriptの次世代仕様であるECMAScriptのコンパイラ。次世代の標準機能を用いて記述されたコードを、それらの機能に対応していないブラウザでも動作するコードに変換することができます。

Ruby

Rubyはプログラミング言語のひとつで、オープンソース、オブジェクト指向のプログラミング開発に対応しています。

Heroku

HerokuはHeroku社が開発と運営を行っているPaaSの名称です。RubyやNode.js、Python、そしてJVMベース(Java、Scala、Clojureなど)の複数のプログラミング言語をサポートしている。

Ruby on Rails

Ruby on Railsは、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

解決済

1回答

3590閲覧

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

pais

総合スコア1

Babel

Babelは、JavaScriptの次世代仕様であるECMAScriptのコンパイラ。次世代の標準機能を用いて記述されたコードを、それらの機能に対応していないブラウザでも動作するコードに変換することができます。

Ruby

Rubyはプログラミング言語のひとつで、オープンソース、オブジェクト指向のプログラミング開発に対応しています。

Heroku

HerokuはHeroku社が開発と運営を行っているPaaSの名称です。RubyやNode.js、Python、そしてJVMベース(Java、Scala、Clojureなど)の複数のプログラミング言語をサポートしている。

Ruby on Rails

Ruby on Railsは、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

0クリップ

投稿2021/06/02 02:23

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

初めまして初心者です。

ただいま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作成方法は見つけたのですが、これはこちらで作成して変更すれば良いのでしょうか?

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

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

lohn

2021/06/02 02:44

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

2021/06/02 13:31

lohnさんありがとうございます。 %webpack --version zsh: command not found: webpack と結果が出た為、webpackが見つからないと出ています。 しかし、webpacker.ymlといったファイルは存在しています。
lohn

2021/06/02 14:28

babel.config.jsはありますか?
pais

2021/06/03 00:13

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

回答1

0

ベストアンサー

  • webpackerでは@babel/plugin-proposal-class-propertiesloose: 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 }]

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

投稿2021/06/02 14:46

編集2021/06/02 14:49
lohn

総合スコア93

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

pais

2021/06/03 00:14

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.53%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問