ブログ初心者・Web制作の情報サイト
Cocoon高速化 + Contact Form 7 併用時のエラーについて

Cocoon高速化 + Contact Form 7 併用時のエラーについて

WordPressサイトの設定を変更していないのに、ある日突然デベロッパツールにエラーが発生しました。

調べてみると、Cocoonの高速化(JavaScript縮小化)とContact Form 7の併用がエラーの原因でした。JapaScriptのエラーなのでサイトにアクセスできなくなるわけではありません。

この記事ではCocoonのJavaScript縮小化とContact Form 7 バージョン5.4併用時に発生するエラーの対処方法を紹介します。同じような状況でエラーが起こっている人は参考にしてください。

エラーの解決方法

Cocoon設定 > 高速化

JavaScript縮小化の除外設定に下記を追加します。

/wp-includes/js/dist/
CocoonのJavaScript縮小化とContact Form 7 バージョン5.4併用時に発生するエラーへの対処方法

この設定は /wp-includes/js/dist/ フォルダ以下のJavaScriptの縮小化を除外しています。

変更を保存すると除外設定が反映されエラーが消えます。

Cocoonの高速化 + Contact Form 7 併用時のエラー

エラーが発生した状況

  • エラー発生日時:2021年2月26日
  • WordPress 5.6.2
  • Contact form 7 バージョン 5.4
  • Cocoon バージョン 2.2.7.3
  • Cocoonの高速化(JavaScript縮小化)とContact Form 7を併用
  • どちらかを無効にするとエラーは消える

エラー内容

Cocoonの高速化 + Contact Form 7 併用時のエラー

7種類9つのエラーが発生していました。

  • Uncaught SyntaxError: Invalid left-hand side expression in postfix operation
  • Uncaught SyntaxError: Unexpected token ‘+’
  • Uncaught ReferenceError: _ is not defined
  • Uncaught SyntaxError: Invalid or unexpected token
  • Uncaught TypeError: Cannot read property ‘setLocaleData’ of undefined
  • Uncaught TypeError: Cannot read property ‘mark’ of undefined
  • Uncaught TypeError: Cannot read property ‘use’ of undefined

主にapi-fetch.min.js(WordPress)とindex.js(Contact form 7)がエラーをはいているようです。

上記の対策を行うとエラーはすべて消えます。

正確な原因は分からない

上にも書きましたがCocoonのJavaScript縮小化除外設定に下記を追加するとエラーは消えます。

/wp-includes/js/dist/

/wp-includes/js/dist/ フォルダ以下にはWordPressの116種類のJavaScriptファイルが入っています。

これらのファイルのうちどれがエラーの原因になっているかは調べていません。おそらく複数のファイルが原因です。

Contact form 7について調べてみると2021年2月25日にバージョン 5.4 がリリースされていました。私のサイトにエラーが発生した1日前です。

Contact Form 7 5.4

設定を何も変更していないのにエラーが発生したのはこれが原因だと思われます。Contact form 7の自動更新とCocoonのJavaScript縮小化が合わさってエラーが発生したのでしょう。