jQuery is not defined in sage 9 and webpack

Hi there,

I got this error when I run npm run build. Can anyone get same issue and please help me resolve it? compilation runs ok.

external "jQuery":1 Uncaught ReferenceError: jQuery is not defined
    at Object.defineProperty.value (external "jQuery":1)
    at webpack_require (bootstrap 1621831…:19)
    at Object.<anonymous> (main.js:26)
    at webpack_require (bootstrap 1621831…:19)
    at Object.<anonymous> (tether.js:1811)
    at webpack_require (bootstrap 1621831…:19)
    at module.exports (bootstrap 1621831…:65)
    at bootstrap 1621831…:65
Object.defineProperty.value @ external "jQuery":1
webpack_require @ bootstrap 1621831…:19
(anonymous) @ main.js:26
webpack_require @ bootstrap 1621831…:19
(anonymous) @ tether.js:1811
webpack_require @ bootstrap 1621831…:19
module.exports @ bootstrap 1621831…:65
(anonymous) @ bootstrap 1621831…:65

Thank you so much!

Which version of sage are you using?
It’s referencing jQuery without issues for me on the latest build.
Either way, check your webpack.config.js file. Towards the end you should have a plugins section which includes the following lines :

new webpack.ProvidePlugin({
      $: 'jquery',
      jQuery: 'jquery',
      'window.jQuery': 'jquery',
      Tether: 'tether',
      'window.Tether': 'tether',

These lines are instructing webpack to consider jquery as a globally available dependency.
As far as you’re enqueueing jQuery as you normally would through your scripts with wp_enqueue_script('sage/main.js', asset_path('scripts/main.js'), ['jquery'], null, true);, everything should be working fine.

1 Like

Thank you @Nicolo_Sacchi, it my fault. I did wrong the enqueueing main.js. I passed the deps parameter as string while it must be an array.