Laravel Mix使用時にJavascriptの関数が未定義(not found)になるときの対処法

2022年12月2日

こんにちは、Webプログラマの隅です。

12月になって一気に寒くなりましたね。銭湯に行きたいです。

先日、Laravelでの開発時にLaravel mixでapp.jsにまとめてコンパイルしたJavascriptの関数が動かないといった問題でうんうん頭を抱えたのですが、解決法が見つかったのでご紹介いたします。

この記事の目次

1 Javascriptでfunctionを設定し、Laravel Mixでコンパイルすると動かない！？
2 Laravel Mixのコンパイル時にはグローバル変数に関数を代入する
3 最後に

Javascriptでfunctionを設定し、Laravel Mixでコンパイルすると動かない！？

既存のLaravelアプリケーションをリファクタリングしていたのですが、
Javascriptの同じ記述が複数箇所に出てきたため、関数化して1つのファイルにまとめてしまおうと
下記のようにapp.jsに読み込む形でコンパイルすることにしました。

resources/js/app.js

require('./bootstrap');
require('./common');

1 2	require('./bootstrap'); require('./common');

resources/js/common.js

function sentou(){
 console.log('銭湯行きたい');
}

function sentou(){

console.log('銭湯行きたい');

}

resources/views/sample.blade.php

<head>
  <script src="{{ asset('js/app.js') }}" defer></script>
</head>
<body>
  <div class="btn" onclick="sentou();">いまの気持ち</div>
</body>

<head>

</head>

<body>

<div class="btn" onclick="sentou();">いまの気持ち</div>

</body>

そして、いざnpm run dev！そしてボタンをクリック！としたところ……

sentou is not defined

1	sentou is not defined

WHY JAPANESE PEOPLE!?
さっきまで動いていたじゃないか!?
銭湯に行くなってことかい!?

Laravel Mixのコンパイル時にはグローバル変数に関数を代入する

調査したところ、Laravel Mixで使用されているwebpackは JavaScript のモジュール機構 (ES2015 モジュール) が実装されており、異なる js ファイルで同じ名前の変数や関数が定義されても問題が起こらないように、各 js ファイルが独立した名前空間を持つようになっているようです。
(つまり、関数sentouはcommon.jsのローカル関数として扱われるため、外部から実行できないのです)

解決策として、関数sentouをwindowオブジェクトのプロパティに代入します。

resources/js/common.js

window.sentou = function(){
 console.log('銭湯行きたい');
}

window.sentou = function(){

console.log('銭湯行きたい');

}

resources/views/sample.blade.php

<div class="btn" onclick="sentou();">いまの気持ち</div>

1	<div class="btn" onclick="sentou();">いまの気持ち</div>

そして、いざnpm run dev！そして再びボタンをクリック！

console

銭湯行きたい

銭湯行きたい

カポーーーン……♨️

ありがとうございます。無事銭湯に行けそうです。

ボタンを押すのも待てないほど銭湯に行きたい方は、下記で読み込み時に実行可能です。

resources/views/sample.blade.php

<head>
  <script src="{{ asset('js/app.js') }}" defer></script>
</head>
<script type="text/javascript" defer>
    window.addEventListener('load', function() {
        window.sentou();
    });
</script>