JavaScript function is not defined with Laravel Mix

Question

First , code in resources/js/app.js

function button1Clicked(){
  console.log('Button 1 is clicked');
}

Second , code in testing.blade.php

<!DOCTYPE html>
<html>
<head>
  <meta name="csrf-token" content="{{ csrf_token() }}">
  <title>Testing</title>
</head>
<body>
  <button onclick="button1Clicked()">Button 1</button>
  <button onclick="button2Clicked()">Button 2</button>

  <script type="text/javascript" src="{!! asset('js/app.js') !!}"></script>
  <script type="text/javascript">
    function button2Clicked(){
      console.log('Button 2 is clicked');
    }
  </script>
</body>
</html>

After npm run dev and testing in localhost

As a result, JavaScript function button1Clicked() in resources/js/app.js is not defined. but the function button2Clicked() in testing.blade.php can be defined. Is it a bug from Laravel Mix or I did some mistakes

Could you add the complete contents of your webpack.mix.js and app.js files? — JJWesterkamp
– JJWesterkamp, Commented Oct 9, 2017 at 10:13
iCoders is correct, you need to use {{ }} and not {!! because {!! are used to display unescaped content — Milan Chheda
– Milan Chheda, Commented Oct 9, 2017 at 10:33
@iCoders i have tried change it to {{ but still doesn't work — YChen
– YChen, Commented Oct 9, 2017 at 11:27
@JeffreyWesterkamp I completed the content already and checked the script is in my public/js/app.js too — YChen
– YChen, Commented Oct 9, 2017 at 11:28

Quinn Wynn · Accepted Answer · 2020-02-18 09:42:37Z

63

I had the same problem as you.

It turned out that when Laravel-mix, aka Webpack, compile the js, it wraps our function in a closure.

For example, when we define a function like this

function setlocale(code) {
     console.log(code);
}

Webpack will generate into

(function(module, exports, __webpack_require__) {

     function setlocale(code) {
         console.log(code);
     }

});

That's why we can access the variables or functions inside that closure, but we cannot from the outside as it limits our scope.

A simple solution is setting our function into window variable, which is a global variable.

window.setlocale = function (code) {
    console.log(code);
}

edited Feb 18, 2020 at 9:42

answered Nov 16, 2018 at 10:36

Quinn Wynn

1,4062 gold badges16 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Anthony Kal Over a year ago

omg, it works now. i do like this. window.YourFunction = function(ParamIfHaveParam){ // yourcode }

Urvish Joshi Over a year ago

For better understanding window.yourVariable = function (code) { ... }

Matěj Černý Over a year ago

It's quite old topic but I would like to ask you, why does webpack put our function in closure? Does it have some advantages?

Quinn Wynn Over a year ago

Hi MatějČerný, Webpack does that strategy to prevent the pollution of global environment.

Ranjan Kumar · Accepted Answer · 2020-11-17 11:43:12Z

8

update the code in resources/js/app.js as below-

button1Clicked = function(){
    console.log('Button 1 is clicked');
};

then it will be available for global scope.

edited Nov 17, 2020 at 11:43

answered Nov 17, 2020 at 11:38

Ranjan Kumar

1,8131 gold badge18 silver badges18 bronze badges

2 Comments

Bennett Over a year ago

Had to search a long time to find this solution. Thanks!

Ranjan Kumar Over a year ago

Glad to know that it helped you! :)

Asaduzzaman Shishir · Accepted Answer · 2022-01-11 09:42:23Z

2

You just use this top of your js file.

window.prototype = this;

answered Jan 11, 2022 at 9:42

Asaduzzaman Shishir

437 bronze badges

1 Comment

Razvan Zamfir Over a year ago

In what js file must one add the above code?

Shuja Ahmed · Accepted Answer · 2019-12-07 07:41:00Z

0

As window object is not accessible when building/packaging assets through laravel mix / webpack, so thats why onclick event handler becomes undefined for the code itself. So if the window.setlocale approach doesn't fit well with you then an alternative would be to bind using the jQuery click event e.g.

$("#button-id").on("click",function() => {
       // enter code here
})

answered Dec 7, 2019 at 7:41

Shuja Ahmed

7525 silver badges21 bronze badges

Collectives™ on Stack Overflow

JavaScript function is not defined with Laravel Mix

4 Answers 4

4 Comments

2 Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

4 Comments

2 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related