結論

jsファイルでの関数定義を以下のように修正する

function hoge() {

から

window.hoge = function(){
// 非同期関数の場合は以下の通り
// window.hoge = async funtion(){

何で1発で関数だと理解されないのか

おまけです。私が調べた結果をまとめたものになるので、間違えてる部分があるかと思いますが、その場合はコメント頂けると幸いです。

コードが動けば良い方は閉じてokです

Laravel Mixで使用されているwebpackはES6(ES2015)が採用されているそうです。

ES6以降、名前空間(namespace)という概念が追加され、複数のファイルについて、それぞれが名前空間を持つ方式と変更されました。

つまり、各jsファイル内関数はローカル関数として扱われるため、外部から実行できないようになっています。

ES6からモジュールとしてスクリプトファイルを読み込むことができるようになり、それぞれが独立し、必要なものだけをやり取りできるようになったためです。

本来、モジュールの公開や読み込みにはexportとimportが用いられますが、LaravelではLaravel Mixを用いた場合、スクリプトの読み込みに以下のような記述を行います。

<script src="{{ mix('js/app.js') }}"></script>

これは、jQueryやReactなど、デザインシステムを実装しているだけであれば問題なく動作します。

しかしクライアントサイドで実行される、クライアントJavaScriptオブジェクトは、ブラウザから見ればローカル関数を呼び出して実行が行われることから 関数 is not defined ~となってしまうわけです。

そこで、windowオブジェクトのプロパティに関数を代入することで、グローバル変数として認識をさせることで対処する、というわけです。

以上、Laravel Mix使用時に関数がis not definedとなる場合の対処法となぜ解決できるのかについての解説でした。