Contact Form7 ( + reCaptcha V3 )で「Unexpected identifier」エラーの対処法

Contactform7とrecaptchaCocoon
この記事は約3分で読めます。

デペロッパーツールのエラー

迷惑メール多くなったのでGoogleのreCaptchaを導入しました。
すると・・・ガンガンきていた迷惑メール(英語版など)とんと来なくなりました。
さすが、GooglereCaptcha V3・・・と思っていたところに
ChromeのF12でデペロッパーツールを見ると・・・

Uncaught SyntaxError: Unexpected identifier
デペロッパーツールでエラーメッセージ

Uncaught SyntaxError: Unexpected identifierというエラーメッセージが出てました。
なんでこうなったかのか不明ですが、2日間調べてわかった事を忘備録とします。

Uncaught SyntaxError: Unexpected identifier

どうもこの組み合わせがよくない模様・・・

  • テーマのCocoon2.2.1.8
  • WordPress 5.4.2
  • Contact Form7 5.2.1( + reCaptcha V3 )

・・・というか reCaptcha V3を導入をきっかけでJsエラーが発生した模様です。

対処したこと

まず「Uncaught SyntaxError: Unexpected identifier」というのはJavaScriptiptの記述ミスだよ!ということらしいのですがプラグインの記述ミスなんてあるのかしら?という疑問が。なぜかというとググってみても似たような記事かなかったので。

ということは、テーマCocoonが関係あるみたい、なので一度テーマを変えてみたらエラーが解消される。
やっぱり・・・ということで
Cocoon高速化(Jsの縮小化)を /plugins/contact-form-7 を除外してみると、
「Uncaught SyntaxError: Unexpected identifier」エラーが消えました!

結論

  • Cocoon
  • Contact Form7 ( + reCaptcha V3 )

の組み合わせが合わない様子です。

テーマの更新やプラグインの更新をする際は、どんな内容のアップデートなのか確認する必要がありますね。

不具合の原因
いくつかサイトを運営していますが、CocoonとContact Form7 5.1.9( + reCaptcha V3 )使用してもでは、デペロッパーツールでのエラー表示はありませんでした。

よく見るとContact Form7 5.2以上から不具合が出るようでした。
更新内容に

  • REST API: wpcf7_ajax_json_echowpcf7_ajax_onload フィルターフックを非推奨化し、それらの代用として wpcf7_feedback_responsewpcf7_refill_response フィルターフックを導入。
  • フロントエンド CSS: レスポンス出力のスタイルルールは form 要素の class 属性を参照する。
  • フロントエンド JavaScript: jQuery イベントの使用を廃止。
  • reCAPTCHA: スクリプトコードを独立したファイルに移動。
  • reCAPTCHA: reCAPTCHA レスポンストークンのフィールド名を g-recaptcha-response から _wpcf7_recaptcha_response に変更。

どうも5.2の更新内容から「Uncaught SyntaxError: Unexpected identifier」エラーとなる原因があるようです。

コメント

タイトルとURLをコピーしました