Laravel-mix: Jscroll extract problem

[gcrispyn]

• Laravel Mix Version: 0.12.1 (npm list --depth=0)
• Node Version (node -v): 6.10.3
• NPM Version (npm -v): 3.10.10
• OS: Debian

Description:

I want to extract jquery-jscroll into vendor.js and I have this error :
jQuery.Deferred exception: $(...).jscroll is not a function ["./resources/assets/js/setup2.js"]/http://172.20.0.3/js/setup2.min.20e168d1323c4340a794.js:12:1
resolve/mightThrow@http://172.20.0.3/js/vendor.b9ca640f1a8e1fc82b13.js:6051:21
resolve/http://172.20.0.3/js/vendor.b9ca640f1a8e1fc82b13.js:6119:12
undefined

So jscroll is never imported.

Steps To Reproduce:

[ankurk91]

Can you post the exact name of this package, i could not find that package on npm.
Also please share your wepack-mix.js code if possible.

[gcrispyn]

Thank you for your answer.

The exact package name is "jscroll".

And here is my webpack-mix.js code :

const {mix} = require('laravel-mix');

/*
 |--------------------------------------------------------------------------
 | Mix Asset Management
 |--------------------------------------------------------------------------
 |
 | Mix provides a clean, fluent API for defining some Webpack build steps
 | for your Laravel application. By default, we are compiling the Sass
 | file for the application as well as bundling up all the JS files.
 |
 */

mix.styles([
    'resources/assets/css/bootstrap.min.css',
    'resources/assets/css/bootstrap-chosen.css',
    'resources/assets/css/bootstrap-select.min.css',
    'resources/assets/css/bootstrap-theme.min.css',
    'resources/assets/css/chartist.min.css',
    'resources/assets/css/chosen.min.css',
    'resources/assets/css/jquery-ui.min.css',
    'resources/assets/css/ladda-themeless.min.css',
    'resources/assets/css/perfect-scrollbar.min.css',
    'resources/assets/css/simple-sidebar.css',
    'resources/assets/css/toastr.min.css'
], 'public/css/all.css')
    .copyDirectory('resources/assets/fonts', 'public/fonts')
    .copyDirectory('resources/assets/img', 'public/img')
    .less('resources/assets/less/styles.less', 'public/css')
    // .js('resources/assets/js/chartist.js', 'public/js/chartist.min.js')
    // .js('resources/assets/js/chosen.jquery.js', 'public/js/chosen.jquery.min.js')
    // .js('resources/assets/js/dashboard_scroll.js', 'public/js/dashboard_scroll.min.js')
    // .js('resources/assets/js/password_validators.js', 'public/js/password_validators.min.js')
    // .js('resources/assets/js/restore_backup_validators.js', 'public/js/restore_backup_validators.min.js')
    .js('resources/assets/js/script.js', 'public/js/script.min.js')
    // .js('resources/assets/js/set_ad_validators.js', 'public/js/set_ad_validators.min.js')
    // .js('resources/assets/js/set_backup_validators.js', 'public/js/set_backup_validators.min.js')
    // .js('resources/assets/js/set_destinations_validators.js', 'public/js/set_destinations_validators.min.js')
    // .js('resources/assets/js/set_sources_validators.js', 'public/js/set_sources_validators.min.js')
    // .js('resources/assets/js/set_strategy_validators.js', 'public/js/set_strategy_validators.min.js')
    .js('resources/assets/js/setup.js', 'public/js/setup.min.js')
    .js('resources/assets/js/setup2.js', 'public/js/setup2.min.js')
    // .js('node_modules/jscroll/jquery.jscroll.js', 'public/js')
    .autoload({
        jquery: ['$', 'window.jQuery', 'jQuery']
    })
    .extract([
        'jquery', 'bootstrap', 'perfect-scrollbar/jquery', 'jscroll'
    ])
    .version()
;

[ruchern-chong]

Copy the jscroll javascript into resources/assets/js directory first.

.copy('node_modules/jscroll/jquery.jscroll.js', 'resources/assets/js/jquery.jscroll.js')

Try changing this

.js('node_modules/jscroll/jquery.jscroll.js', 'public/js')

to

.js('resources/assets/js/jquery.jscroll.js', 'public/js')

[gcrispyn]

Many thanks @ruchern !

Ok, it works but I don't understand. Why couldn't I use Jscroll as a vendor (vendor.js)? Because it's a vendor as Jquery or Bootstrap so i want to use it like them.

[ankurk91]

Seems like this library does not support module bundler, see issue , so extract wont work.

[gcrispyn]

OK thks @ankurk91 !!

I have an another problem with on other npm library called Ladda. Is it possible to discuss with you about i on this topic or I have to create an another issue?

[ankurk91]

If it is related to mix.extract() then use the same thread.
If it is caused by laravel-mix then create a new issue, if not then please use public forums like laracasts.
FYI. ladda does support extract

[gcrispyn]

It's related to mix.extract()

When I try to extract Ladda. I have this issue :

`This dependency was not found:

• ladda in multi jquery bootstrap perfect-scrollbar/jquery ladda`

However, I installed ladda, this library is in node_modules folder

[ankurk91]

make sure you are using exact package name ladda.
I just installed and tried it, it works fine.
mix.extract('ladda')
Make sure it is installed. try this command on terminal (if you are on unix)

npm ls | grep ladda

[gcrispyn]

I tried this command and I have this output :

+-- [email protected]

[ruchern-chong]

@gcrispyn You probably can still extract it. What I did was to copy the file out from the node_modules directory to see if it works.

[gcrispyn]

@ruchern I forgot to tell you that i needed to add :
<script src="{{ mix('js/jquery.jscroll.js') }}"></script>
in my view, and then it works

[ruchern-chong]

Nice. Glad you got it sorted out now.

[gcrispyn]

Hello @ruchern @ankurk91 ,

I have anoher problem with extract Ladda library. When I try to extract this, I have this error :

ReferenceError: Ladda is not defined

I tried, to import the js into my javascript file but it doesn't work.

Thks in advance.

[ankurk91]

All you need is -
https://laracasts.com/series/webpack-for-everyone

[ruchern-chong]

@gcrispyn Actually I do not know why you want to extract these libraries.

The best way to go around this is to add the packages into the app.js file.

Example:
resources/assets/js/app.js

window.Ladda = require('ladda')

With this, Ladda will be inside app.js at compile and you will require 1 less request.

https://laravel.com/docs/5.4/mix#vendor-extraction

The only reason you may want to use extract is to split them up into 3 different js files. This will result in 2 extra http request when the browser is trying to load.

[moyvera]

@ruchern I think is about optimization and there are two ways

people who prefer to have less requests
or people who prefer to have these libraries separated for later just update the app js file to have less load time

:P