Webpack-encore: "$ is undefined" with .autoProvidejQuery() and jQuery plugin

Created on 22 Jun 2017 · 4Comments · Source: symfony/webpack-encore

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.

Source

heitorvrb

Most helpful comment

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

pmpr-ir on 28 Oct 2017

👍4

All 4 comments

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.

kcivey on 23 Jun 2017

👍4

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 :).