Contact Form 7で発生した「Uncaught SyntaxError: Unexpected identifier」を解消する方法【Cocoon】

イヌ
イヌ

いつのまにか発生していたエラーを解消するよ!

ウサギ
ウサギ

正常に動作しているか、確認しないとね!

この記事の概要

問題は

コンソールに「Uncaught SyntaxError: Unexpected identifier」が表示されている

です。

状況は

  1. 「Contact Form 7」を利用している
  2. Cocoonで「JavaScript縮小化」を利用している

です。

結論は

JavaScriptの縮小化しないファイルパスのテキストエリアに「/plugins/contact-form-7」を登録する

です。

詳しくは続きをご覧ください!

コンソールエラー「Uncaught SyntaxError: Unexpected identifier」が発生

イヌ:開発者ツールを開いたらですね、「Uncaught SyntaxError: Unexpected identifier」エラーがでてまして。

ウサギ:ほう。エラー。穏やかじゃないわね。

イヌ:いまいち、Page Speed Insightsのスコアが上がらないから、開発者ツール開いて、いろいろ調べていたら、エラーがでてて。

ウサギ:ふむふむ。

イヌ:なにか設定、調整したかなーと思って。

ウサギ:ふんふん。

Cocoonの高速化「JavaScript縮小化」が原因かも

イヌ:Page Speed Insightsのスコア対策で、最近「高速化」したんですよ。

ウサギ:高速化って?

イヌ:HTMLとCSSとJavaScriptは文字列で作られていて、文字数が少なければ少ないほど、サイトが早く表示されるのね。

ウサギ:ふむふむ。

イヌ:JavaScriptの縮小化という、コードの不要な文字などを置き換える処理をすることによって、

ウサギ:へぇ。

イヌ:例えば、 var thisIsImportantValue; みたいな変数が var a; だと、とても短いでしょ。

ウサギ:短すぎるし、なんの変数かわからん。

イヌ:人間からみるとそうだね。でも、コンピュータ的には、正しく動いているコードを適切に置き換える分には、読みづらくても問題ないんだよね。

ウサギ:ふむふむ。

イヌ:でも今回のケースは、多分 Contact Form 7 のプラグインのコードが、何か他のコードの変数名などが重複して、誤って縮小化されちゃったのかなーと思って。

ウサギ:へー。そんなことがあるんだ。

イヌ:原因を追っていくのも必要なんだけど、今回のケースはとりあえず回避する方が良いだろうという判断をしました。

ウサギ:ふーん。なんで?

イヌ:Cocoonの縮小化も、Contact Form 7も、イヌが書いたコードではないので、デバッグして修正するとなると、Cocoonのテーマも確認しなければいけないし、Contact Form 7や他のプラグインなども確認する必要があるから、回避できる方法があれば、現実的だなと。

ウサギ:なるほどー。

CocoonでJavaScript縮小化の除外ファイルを設定する

イヌ:以下がJavaScript縮小化の設定の画面です。

ウサギ:はい。

イヌ:赤囲みのところにContact Form 7のプラグイン全体を縮小化しないように、「/plugins/contact-form-7」を追加します。

ウサギ:ふむふむ。

イヌ:これでコンソールエラーが解消しました!

ウサギ:おー、よかった。

イヌ
イヌ

コンソールエラーが原因で、ユーザの画面表示が遅くなることがあるので、確認は必要ですね!

ウサギ
ウサギ

なるほどね!気をつけて確認しよう!
またね〜

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です