jQuery is not defined in sage 9 and webpack

sage
1

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

bug.png1920×1080 261 KB

Thank you so much!

2

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
3

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.