Laravel Mix my javascript code is not running

Question

I'm using Laravel facing a problem when compiling assets. By default laravel provides a wrapper around webpack which is laravel-mix, laravel-mix using file called webpack.mix.js, and by using npm run dev command, laravel-mixcompile all js files into one webpack bundle js file.

Code of webpack.mix.js:

let mix = require('laravel-mix');

mix.js('resources/assets/js/app.js', 'public/js')
   .sass('resources/assets/sass/app.scss', 'public/css');

I have a Main.js file which has some jquery code.

Main.js:

;( function( $, window, document, undefined ) {

    'use strict';
    $(window).on('load', function() {
        alert('ready');
    });
 }
)( jQuery, window, document );

My directory structure is something like this

resources\assets\js

app.js
bootstrap.js
Main.js

Code of app.js:

require('./bootstrap');

Code of bootstrap.js:

try {
    window.$ = window.jQuery = require('jquery');// jquery
    require('bootstrap');// bootstrap framework js
    require('./Main'); // Main.js


} catch (e) {
}

When i type command npm run dev all assets are compile into one file then why my Main.js jquery code which is just an alert popup doesn't execute on the page.

But when i change order of the bootstrap.js file into something like this then my Main.js code is execute.

try {
    window.$ = window.jQuery = require('jquery');// jquery
    require('./Main'); // Main.js
    require('bootstrap');// bootstrap framework js



} catch (e) {
}

Why this thing is happening. Does conflict happen between bootstrap framework js file and Main.js file.

Can you provide your browser console when your code doesn't execute? — nmfzone
– nmfzone, Commented Nov 23, 2017 at 20:41
@nmfzone There is not any error comes, but when i load my page my Main.js script is not executed — John Doe
– John Doe, Commented Nov 24, 2017 at 7:13

andras · Accepted Answer · 2021-05-03 17:39:55Z

7

Replying to the tldr in the comments:

There is not any error comes, but when i load my page my Main.js script is not executed

I had this same issue and including the manifest.js and vendor.js solved these issues:

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

answered May 3, 2021 at 17:39

andras

3,6955 gold badges33 silver badges56 bronze badges

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

2 Comments

huda Over a year ago

Thank you! Tried to solve a similar problem for 2 hours. Now it is fixed. Did not know that .extract() is applied to every js you compile with mix!

andras Over a year ago

Yes it is applied to every js file. It looks at all the dependencies of all included js files and then determines what should be included in the vendor.js. And the 'start script' (the one that calls the bundled JavaScript files that are created from the entrypoints) is the manifest.js, so it should be included as well.

Collectives™ on Stack Overflow

Laravel Mix my javascript code is not running

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related