Using laravel mix to include js dependencies

Question

i can't really get my js libraries to work , some time ago i decided to have a separate js file for every library i use (so i have a jquery.js file and a bootstrap.js file included in my layout) ,everything was working just fine until i had to add jquery-ui to this chaos , and got this error

Uncaught TypeError: $(...).slider is not a function

until i loaded ,jquery and jquery-ui in the same file .The problem is i dont want to include jquery ui everywhere i include jquery , beacuse i only use it in 2 pages. Below i will put my code :

jquery-ui.slider.js:

require('jquery-ui/ui/widgets/slider');
require('./components/carFilter.js');

app.js:

window.$ = window.jQuery = require('jquery');
require('./bootstrap');

webpack.mix.js:

mix.js('resources/assets/js/app.js', 'public/js')
mix.js('resources/assets/js/jquery-ui.slider.js', 'public/js');

I am using the following npm modules :

bootstrap-sass
jquery
jquery-ui

If you still curious to digging up such question, here's a referece webpack.js.org/guides/code-splitting-async — Chay22
– Chay22, Commented May 15, 2017 at 11:35
thank you @Chay22 , i will study it later , if i find a beter way , i will post it — Stem Florin
– Stem Florin, Commented May 15, 2017 at 11:52

Stem Florin · Accepted Answer · 2017-05-15 10:41:04Z

5

I ended up by just creating a file where i require jquery,bootstrap.js and then i require this file in a specific file for the two pages... Below its the code:

app.js

window.$ = window.jQuery = require('jquery');
require('./bootstrap');

page.js

require('./app.js')
require('jquery-ui/ui/widgets/slider');

It seams that now it is working ,even if now i have to include a js file in all the views...Question its still open , i hope somone have a beter idea .

answered May 15, 2017 at 10:41

Stem Florin

8721 gold badge7 silver badges19 bronze badges

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

Comments

Anton Stasyuk · Accepted Answer · 2021-07-13 06:30:41Z

I think laravel-mix only serves the purpose when you have small sites with pages that all include the same app.js & app.css files.

When you have complex portal with multiple pages that have different set of frontend "plugins" you have to split your entries & generate a table of dependencies automatically.

After a lot of time searching I've come to the conclusion that the best approach would be switch to webpack-encore from Symfony.

You can read more about it's capabilities here Webpack Encore Official Documentation.

Now the question is how to embed it to Laravel? It's quite easy, I've just reverse engineered the Symfony's PHP bundle for that and here is the result: https://github.com/ntpages/laravel-encore

Now you just have to include you're dependency in the page entry and it's all handled automatically.

Lajos Arpad · Accepted Answer · 2017-05-15 09:28:30Z

-1

I think you should load jquery-ui when a condition is met, like:

if (window.loadJQueryUI) {
    require('jquery-ui');
}

And you need to initialize loadJQueryUI for the two pages, like this:

<script type="text/javascript">
    window.loadJQueryUI = true;
</script>

answered May 15, 2017 at 9:28

Lajos Arpad

80.4k42 gold badges123 silver badges235 bronze badges

Collectives™ on Stack Overflow

Using laravel mix to include js dependencies

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related