Call   0208 3131682   Mon-Fri 9am-6pm

Adding javascript functions to Laravel Mix ( and why you get error Uncaught ReferenceError: function is not defined )

This one had me pulling my hair out the other day. I was using Laravel,  adding a javascript function to the app.js file ( also tried using require in app.js and pulling in my function ). Laravel uses Laravel Mix which is a wrapper for webpack.

Yet with either approach I was getting the javascript error:

Uncaught ReferenceError: testing_helloworld is not defined

It seemed to be working ( had npm run watch , compiling it and doing a view source I could see the function in my javascript app.js file ).

My function source code looked like this:

It seems webpack wraps this in IIFE (see details on mozilla site )

This has the effect of wrapping it in its own scope ( and not in the global scope ).

So to put it in the global scope, so you can call it anywhere, you need to pop the function onto a global such as Window as below:

thanks stack overflow ! 

I’d have read through my app.js file , but it was massive and would have taken me awhile to find this I think ! Hope this helps someone else with Laravel Mix, Webpack and adding your own javascript functions.

 

 

Disclaimer: All content on this site, is use at your own risk (Always backup before changing anything in your software/database/servers etc). Techs change, go out of date etc...
I/we accept no liability if anything you use on this site adversely affects you.

Leave a Reply