laravel+reactでgoogle-recaptcha-v3を使いたい

Question

##やりたい事

laravel7にReactを繋げて、postの時にrecaptchaを使いたいです。

しかし、現在、npm run devでエラーが出ます。

エラーメッセージに従い、npmやyarnで@babel/plugin-proposal-class-propertiesをインストールしてみましたが、同じエラーメッセージが出続けます。

laravelとReactを繋ぐのは初めてです。

詳しい方がいたら、どうかご教授お願いします。

##エラーメッセージ

 ERROR  Failed to compile with 1 errors                              10:11:06 AM

 error  in ./resources/js/components/Example.js

Syntax Error: SyntaxError: /home/vagrant/App/resources/js/components/Ex                                                                                                                                                             

ample.js: Support for the experimental syntax 'classProperties' isn't currently                                                                                                                                                              

enabled (58:18):

  56 |   }
  57 |
> 58 |   verifyCallback = (recaptchaToken) => {
     |                  ^
  59 |     // Here you will get the final recaptchaToken!!!
  60 |     console.log(recaptchaToken, "<= your recaptcha token");
  61 |

Add @babel/plugin-proposal-class-properties (https://git.io/vb4SL) to the 'plugi                                                                                                                                                          

ns' section of your Babel config to enable transformation.

    at parser.next (<anonymous>)
    at normalizeFile.next (<anonymous>)
    at run.next (<anonymous>)
    at transform.next (<anonymous>)

##参考記事

Qiita:「Laravel7＋Reactの環境を構築する」

「Reactで作るSPAにreCHAPCHA(v3)を仕込む方法。」

GitHub「@babel/plugin-proposal-class-properties」

##環境

・ubuntu
・laravel7
・react

Comments

[Lulucom]

詳しくはないので、もし的外れな追記依頼でしたらすみません。
Babelの設定で `@babel/plugin-proposal-class-properties` の追加はされているのでしょうか。
参考: https://babeljs.io/docs/en/next/babel-plugin-proposal-class-properties.html#with-a-configuration-file-recommended

[beta]

babelについて調べてみたら、何とか解決しました。
babelの事を何となく、reactのようなViewフレームワークだと誤解していました。
.babelrcにプラグイン追加の設定をしてみたら、無事、コンパイルできました。
ありがとうございます。

[Lulucom]

いえいえ良かったです。そのように回答を作成して自己解決にしてください。

Answer 1

.babelrcに、@babel/plugin-proposal-class-propertiesの設定をしたら、上手く行きました。