この記事ではWordPressテーマCocoon使用時に、Chromeデベロッパーツールで表示された「Uncaught SyntaxError: Invalid or unexpected token」というエラーの修正方法を紹介します。
プラグインの追加やブログのカスタマイズをしていてデベロッパーツールを確認している際に、突然意味のわからないエラーが出てくるととても焦ってしまいますよね。
私もエラーに直面して右往左往しながら対処方法を見つけたのですが、ちょっと設定を見直すだけで簡単に修正することができます。
エラーの原因が同じであれば、これから紹介する修正方法を真似するだけで同じように解決できますよ。
エラーの意味
“Uncaught SyntaxError: Invalid or unexpected token”というエラーは、JavaScriptの文法におかしな部分がある際に表示されるエラーとのことです。
プログラミングに関しては内容を詳しく把握しているわけではないのですが、カッコ「{」「}」や、カンマ「,」などの記述忘れや、位置がおかしい場合にエラーが起こるそうです。
エラーの原因はWordfence
まず問題の原因を探るために、一つ一つプラグインを無効化したり、Cocoon高速化のチェックをオンオフしたりしながらデベロッパーツールでエラーが出るとき出ないときを確認しました。
確認を繰り返していると、私の環境ではセキュリティプラグインであるWordfenceを有効化していて、なおかつCocoon設定の高速化で「JavaScriptを縮小化する」にチェックが入っているとエラーが出るということがわかりました。
デベロッパーツールでエラーが出ているときにエラーの該当箇所を調べると、Wordfenceが出力しているJavaScriptの文章部分にエラーがあることがわかりました。
※画像では4 errorsと表示されていますが、残り3つのエラーはレスポンシブ対応のアドセンス表示によるもの（修正不要）であり、今回の話とは無関係なので説明を省略します。
エラーの修正方法
エラーの修正方法はとても簡単です。
WordPressの管理画面から、Cocoon設定→高速化のメニューを開きます。
おそらくご自身のサイトでエラーを目にしてこの記事にたどり着いた方であれば、「JavaScriptを縮小化する」の設定にチェックが入っていますね。
実は、何も対策していない状態でここにチェックを入れていると、Wordfenceでは”Uncaught SyntaxError: Invalid or unexpected token”というエラーが表示されてしまうのです。
何故かというとJavaScript縮小時の動作として、Wordfenceが出力するJavaScriptの文字列の途中で改行すべきではない箇所で改行（半角スペースが削除）されてしまうのが原因となっているようです。
エラーを修正するためには、このチェックボックスのすぐ下、
「縮小化しないJavaScriptファイルのパス、もしくはパスの一部を改行で区切って入力してください。」という文章のすぐ上にあるフォームに、
/plugins/wordfence/と入力し、最後に「変更を保存」ボタンを押して反映するだけです。
この設定によりWordfenceが出力するJavaScriptに関しては縮小化をしないようになり、エラーも発生しなくなります。
おわりに
たったこれだけの対策で今回表示されたエラーを修正することができ、実際にChromeデベロッパーツールで確認してもキレイさっぱりエラーが解消されていることが確認できます。
エラーの原因を探る際に問題の切り分けをするのは非常に手間がかかり労力を要するものですが、この記事があなたの助けになれば幸いです。
コメント