"Cannot read property 'fn' of undefined" with webpack

[bovender]

In the past I used Garlic.js with great success, but now that I use webpack to compile my assets, I get this error in the browser console:

garlic.min.js:145 Uncaught TypeError: Cannot read property 'fn' of undefined
    at garlic.min.js:145
    at Object../node_modules/garlicjs/dist/garlic.min.js (garlic.min.js:197)
    at __webpack_require__ (bootstrap:19)
    at Module.<anonymous> (application.js:17)
    at Module../app/javascript/packs/application.js (application.js:32)
    at __webpack_require__ (bootstrap:19)
    at bootstrap:83
    at bootstrap:83
(anonymous) @ garlic.min.js:145
./node_modules/garlicjs/dist/garlic.min.js @ garlic.min.js:197
__webpack_require__ @ bootstrap:19
(anonymous) @ application.js:17
./app/javascript/packs/application.js @ application.js:32
__webpack_require__ @ bootstrap:19
(anonymous) @ bootstrap:83
(anonymous) @ bootstrap:83

My entry point contains this:

require('garlicjs')

And it does not matter whether I change this to:

import 'garlicjs'

I must admit that I am not very good at all at JavaScript, so I would not be surprised if the solution is really simple?

[nathanhennig]

It's probably too late for this to be helpful to you, but for anyone who finds this issue like I did, here's my solution. I'm using Rails with webpack. In my config/webpack/environment.js file I had:

const webpack = require('webpack')
environment.plugins.prepend('Provide',
  new webpack.ProvidePlugin({
    $: 'jquery',
    jQuery: 'jquery'
  })
)

The problem was fixed by adding 'window.jQuery': 'jquery'.

const webpack = require('webpack')
environment.plugins.prepend('Provide',
  new webpack.ProvidePlugin({
    $: 'jquery',
    jQuery: 'jquery',
    'window.jQuery': 'jquery' // added here
  })
)