スクリプトを遅延読み込みさせたら、デベロッパーツールで「Uncaught ReferenceError: wp is not defined…」と出たときは

WordPressでは、ページを表示するまでに、WordPress本体の動作に必要なもの、プラグインの動作に必要なもの、テーマの動作に必要なものなど、たくさんのスクリプトを読み込みます。

そしてこれらのスクリプトは、読み込まれるごとにきちんと完了して次の処理へという流れを繰り返すので、処理の待ち時間が発生してページの表示速度を低下させる要因にもなります。

そこで対策としてよく行われるのが、スクリプトの読み込みを遅延させる処置。async(とりあえず飛ばして後から処理)やdefer(できる限り他の処理と並行して処理)という属性を読み込みコードに挿入するだけで、ブラウザ側が判断して速度低下の影響を抑えてくれる機能です。

WordPressの場合、WordPressが標準としている作法でenqueueするすべてのスクリプトに「defer」属性を付加するには、Autoptimizeなど、スクリプト読み込みの遅延処理を行う方法以外にも、以下のコードで比較的簡単に対処できるのはいろいろなサイトで紹介されているからご存じでしょう。

//管理画面では適用しない
if(!is_admin()){
if ( !function_exists( 'habone_replace_scripttag' ) ){
function habone_replace_scripttag( $tag ) {
if ( !preg_match( '/b(defer|async)b/', $tag ) ) {
	return str_replace( "type='text/javascript'", 'defer', $tag );
	}
	return $tag;
}
}
add_filter( 'script_loader_tag', 'habone_replace_scripttag' );
}

でもこの処理により、問題が発生することがあります。大きくは以下のケースがあります。

• 何かの動作を行う部分が動かない
• 表示そのものや動作には問題なさそうだが、デベロッパーツール上でエラーが出る

今回出た実際のエラー画面が下の画像です。

内容としては「処理しようとしたスクリプトが定義されていないですよ！」というものです。Uncaught…というのは比較的よく出るもので、何かをする前まで正常に動いていたなら、大抵は読み込み順が正しくないということが原因であることは間違いありません。

ただ、ひとまず表示や動作には問題がない（恐らくバックエンドでしか影響していない）もののようなので無視．．としようかとも思いましたが、やはりエラーとして表示されるのは気持ち悪いので対処することにしました。

今回出たのは「i18n」（翻訳文字列の処理）に関するものですが、スクリプト読み込みの遅延処理で問題が出るときには同様に探ると解決できると思いますので、備忘録を兼ね紹介しておきます。

「Uncaught ReferenceError: wp is not defined」エラーの原因探し

はじめに、今回の「i18n」のエラーが出て不具合が起こる可能性を推察します。

エラー発生時の基本に沿って検証していきます。

テーマを変更してみる

今回エラーが表示されたテーマは自作テーマなので、セオリー通りいくつかのデフォルトテーマへ変更してみます。しかし、エラーはどのテーマでも表示されたので、今回のケースではテーマの問題ではないことが確定しました。

プラグインを停止してみる

次もセオリー通りの検証です。プラグインを１つ停止しては確認．．を繰り返します。そうしていると、とあるプラグインの停止／有効化でこのエラーが出ない／出るが変わることが分かりました。

原因はプラグインだったようです。

ただ、このプラグインの使用をやめればという問題ではなく、JavaScriptを多言語対応するときに「i18n」は使われますから、きちんと対応しておくことが必要です（逆に今回のプラグインでは閲覧画面側にJavaScriptの翻訳部分を表示させるものがなかったので単純に問題ないように見えただけということです）。

「Uncaught ReferenceError: wp is not defined」エラーの対処例

原因が分かればなんとかなる！ということで早速対処してみます。

以下がHTML上に吐き出されているけど読み込み不良となっているスクリプトです。

<script type='text/javascript' defer src='https://hogehoge.com/wp-includes/js/dist/i18n.min.js?ver=5f1269854226b4dd90450db411a12b79' id='wp-i18n-js'></script>

対処としては、このスクリプト以外の読み込みに対してだけ「defer」属性を追加するようにします。

冒頭のコードでもできないことはないですが、以下のページで一塊にして紹介されていましたのでそれを流用して少し変更を加えます。

https://www.codegrepper.com/code-examples/javascript/defer+parsing+of+javascript+wordpress

以下が入れ替えたコードです。

//管理画面では適用しない
if(!is_admin()){
if ( !function_exists( 'habone_defer_parsing_of_js' ) ){
function habone_defer_parsing_of_js( $url ) {
    if ( FALSE === strpos( $url, '.js' ) ) return $url;
    if ( strpos( $url, 'wp-i18n-js' ) ) return $url;
     return str_replace( ' src', ' defer src', $url );
}
}
add_filter( 'script_loader_tag', 'habone_defer_parsing_of_js', 10 );
}

冒頭で示した元のコードとどこが違うのかというと、5行目に記述している以下の行で「wp–18n-js」という文字列があったらdefer付加の対象外としなさいよというのが追加されているところです。

if ( strpos( $url, 'wp-i18n-js' ) ) return $url;

よし、これで大丈夫！とソースを確認してみると、確かに wp-i18n-js 以外のスクリプトにはdeferが付加されていますが、エラーは消えるどころか、増えてしまいました。

何で？．．．．．．．．．

そこで次に注目したのが、WordPressの作法でスクリプトを読み込む場合のオプション。array()で依存関係が示せるのを思い出しました。依存関係は「そのスクリプトが読み込まれた後で．．」という処理をするので、直前の以下のスクリプトの読み込みも除外してみました。

<script type='text/javascript' defer src='https://hogehoge.com/wp-includes/js/dist/hooks.min.js?ver=a7edae857aab69d69fa10d5aef23a5de' id='wp-hooks-js'></script>

除外したコードが以下

//管理画面では適用しない
if(!is_admin()){
if ( !function_exists( 'habone_defer_parsing_of_js' ) ){
function habone_defer_parsing_of_js( $url ) {
    if ( FALSE === strpos( $url, '.js' ) ) return $url;
    if ( strpos( $url, 'wp-i18n-js' ) ) return $url;
    if ( strpos( $url, 'wp-hooks-js' ) ) return $url;
    return str_replace( ' src', ' defer src', $url );
}
}
add_filter( 'script_loader_tag', 'habone_defer_parsing_of_js', 10 );
}

見事にエラーは出なくなりました。

特に動作にも問題はありませんから、これで大丈夫でしょう。

今後何かをしているうちに違う問題が出る可能性がないわけではないですし、現時点で起こっていても気づいていないだけかも知れないということで「でしょう．．」としましたがまず問題ないでしょう。

---

これは何もコードを直接functions.phpへ挿入した時だけではなく、Autoptimizeなどの高速化？プラグインを使った場合でも起こる可能性の高い問題ですから、プラグイン使用時は除外設定で対処するようにしましょう。