Webpack-encore: jQuery error: $ is not defined / Can't find variable: $ even using legacy workaround

[nicohery]

After upgrading to Symfony 5.2.6 (and applying the updated recipes), I "again" encountered the issue in javascript console.

$ is not defined
Can't find variable: $

Same as issue #32 but reappearing after updates.

Our code needs access to $ or jQuery variables outside of JavaScript files processed by Webpack.
I verified my webpack.config.js and my app.js folowing instructions found in Symfony Doc jQuery Plugins and Legacy Applications :

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

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

This workaround doesn’t work and I still have the error.

[nicohery]

webpack-encore-bundle 1.9 introduces script attributes : "defer".
https://github.com/symfony/recipes/blob/master/symfony/webpack-encore-bundle/1.9/config/packages/webpack_encore.yaml

    # Set attributes that will be rendered on all script and link tags
    script_attributes:
        defer: true

Symfony recipes set this option to true in config/packages/webpack_encore.yaml
If this option is set to true "global" workaround describe in jQuery Plugins and Legacy Applications doesn’t work.

Setting this to false fixed the error.

Do we have to update Symfony documentation to prevent errors and to explain what does this new attribute ?

[stof]

using deferred scripts is indeed not compatible with legacy applications wanting to use in-page scripts referencing things exposed by the JS file managed by webpack (or any other tool for that matter), as the execution would not be guaranteed.
I think that the doc should indeed be updated to mention that defer must be disabled for such case.

[giantthinker]

@nicohery have you tried expose-loader?

[weaverryan]

Indeed, documentation issue - closed by https://github.com/symfony/symfony-docs/pull/15280