Webpack Encore - $ is not defined

Question

I followed the documentation to make Webpack Encore work in my project. Imported js files in webpack.config.js work fine but I have an issue in page-specific js : $ is not

Answer 1

You should use output.library: "Root" //Or what name you want config in webpack.config.js and in your entry js file do this:

import $ from 'jquery'

... Your code of common entry file

export {$};

And you will access jquery like this:

Root.$

Answer 2

Got it working by following the documentation : https://symfony.com/doc/current/frontend/encore/legacy-apps.html

I had to write this in app.js :

// require jQuery normally
const $ = require('jquery');

// create global $ and jQuery variables
global.$ = global.jQuery = $;

And I removed this from webpack.conig.js since it's equivalent to .autoProvidejQuery :

.addPlugin(new webpack.ProvidePlugin({
    $: 'jquery',
    jQuery: 'jquery',
    'window.jQuery': 'jquery',
}))

Thank you for your help !