"$ is undefined" with .autoProvidejQuery() and jQuery plugin

[heitorvrb]

I'm trying to use the "foundation-datepicker" package and getting "TypeError: $ is undefined".

app/Resources/js/app.js:

require('foundation-sites');
require('foundation-datepicker/js/foundation-datepicker.js');
[...]

.autoProvidejQuery() is enabled in webpack.config.js. .autoProvidejQuery() works with other jQuery-dependant packages, but when I add this one, it gives the error.

Could it be something in the package? According to the browser profiler, the guilty lines in foundation-datepicker.js are:

! function($) {

[...]

$.fn.fdatepicker = function(option) {

[...]

What should I do? Sorry if this is not very webpack-encore specific.

[kcivey]

The autoProvideVariables() method is not working for me either. I had to make a separate file containing lines like

window.$ = window.jQuery = require('jquery');
window.moment = require('moment');
window._ = require('underscore');

and include it in the entry.

[weaverryan]

Hi guys!

I know the problem for foundation-datepicker (at least). Add this:

Encore
    // ...
    autoProvideVariables({
        'window.jQuery': 'jquery'
    })

There was a PR to add this to autoProvidejQuery (#10), but it has some unfortunate side effects (#32). This should fix your issue. Internally, we'll debate the best "default" option.

@kcivey You may have been having the same issue... but I would need a bit more code and the error details to know for sure :).

[heitorvrb]

It works. Thanks for your help

[pmpr]

Node: 8.7.0
Yarn: 1.2.1
Encore: 0.16.0

same problem here with Bootstrap 3.3.7 and on page, arbitrary jQuery stuff.
BS is working as normal, but other jQuery stuff on the page say:

Uncaught ReferenceError: $ is not defined