LaravelMix : Update docs for autoload (alternative technique)

[NicksonYap]

I'm submitting a ... (check one with "x")

[ ] Bug report => search github for a similar issue or PR before submitting
[ ] Feature request
[ x] Other, please describe

Tell about your platform

• eonasdan-bootstrap-datetimepicker version : 4.x.x
• Vue.js version : 2.x.x
• Browser name and version : Chrome|Firefox|Safari x.x.x
• This package version : x.x.x | latest

Current behavior

I'm using Laravel with Laravel Mix

Original problem was this.elem.datetimepicker is not a function Somehow, jQuery wasn't imported into this plugin.

Turns out the original method in docs:

// webpack.mix.js
mix.autoload({
    'jquery': ['$', 'window.jQuery', 'jQuery'],
    'vue': ['Vue','window.Vue'],   
    'moment': ['moment','window.moment'],   
  })

Is causing problems and conflicting with existing code.

Expected behavior

Took me quite a while, but it's good to let others know that autoload() can be targeted for specific files

    mix.js('resources/assets/js/datetime.js', 'public/js').autoload({
       'jquery': ['$', 'window.jQuery', 'jQuery'],
       'vue': ['Vue','window.Vue'],   
       'moment': ['moment','window.moment'],   
    })

or only when needed:

    mix.js('resources/assets/js/datetime.js', 'public/js').autoload({
        'jquery': ['$', 'window.jQuery', 'jQuery'],
    })

Minimal reproduction of the problem with instructions

[ankurk91]

Webpack ProvidePlugin does not work per entry, it work globally for all loaded modules.

https://webpack.js.org/plugins/provide-plugin/

Here are some links that may help you - https://stackoverflow.com/questions/28969861/managing-jquery-plugin-dependency-in-webpack https://github.com/webpack/webpack/issues/2180#issuecomment-196048732

[ankurk91]

autoload() can be targeted for specific files

How can you say that BTW?

[NicksonYap]

I may be wrong.

I think I'm facing jQuery conflicts because I'm using Laravel Mix with uncompiled JS in php files.

Originally, I was using: window.$ = window.jQuery = require("jquery"); for both compiled (Laravel Mix) and uncompiled (php file) and it worked.

But after adding vue-bootstrap-datetimepicker It gave an error: this.elem.datetimepicker is not a function

Though .autoload() made datetime picker work, it caused problems for my uncompiled JS.

I thought mix.js('resources/assets/js/datetime.js', 'public/js').autoload({ ... }) applied for specific files / entries but turns out somehow some parts of my uncompiled JS files still could not find jQuery.

And had to disable vue-bootstrap-datetimepicker

Got any ideas how i can provide jQuery for uncompiled JS, my Vue files (handled by Laravel Mix) and vue-bootstrap-datetimepicker?

Thanks!

[ankurk91]

It is upto you, how you consume the package. The package requires jQuery in global namespace in order to work. There are several ways to do that. I can not look into your code. I tried the package in fresh laravel project today and it worked well.