$ is not defined (with webpack)

[maejml]

Got this error when I import sticky-kit with webpack :

Uncaught TypeError: $ is not a function at Object.<anonymous> (sticky-kit.js:9) at Object../node_modules/sticky-kit/dist/sticky-kit.js (sticky-kit.js:326) at __webpack_require__ (bootstrap:19) ...

My import line import 'sticky-kit/dist/sticky-kit'; is working.
jQuery is working too (debugged with a console log), I have the right lines in environment.js and config etc.

In the config, I added this rule as seen in another question but it didn't work :
{ test: /\.js$/, include: [ path.join(__dirname, 'node_modules', 'sticky-kit') ], use: [{ loader: 'imports-loader?jQuery=jquery,$=jquery,window=>global&window.jQuery=jquery,this=>window,define=>false' }] }

What am I not doing right ?

[dimasi]

+1

[dimasi]

Got this error when I import sticky-kit with webpack :

Uncaught TypeError: $ is not a function at Object.<anonymous> (sticky-kit.js:9) at Object../node_modules/sticky-kit/dist/sticky-kit.js (sticky-kit.js:326) at __webpack_require__ (bootstrap:19) ...

My import line import 'sticky-kit/dist/sticky-kit'; is working.
jQuery is working too (debugged with a console log), I have the right lines in environment.js and config etc.

In the config, I added this rule as seen in another question but it didn't work :
{ test: /\.js$/, include: [ path.join(__dirname, 'node_modules', 'sticky-kit') ], use: [{ loader: 'imports-loader?jQuery=jquery,$=jquery,window=>global&window.jQuery=jquery,this=>window,define=>false' }] }

What am I not doing right ?

Just add

window.jQuery = $;
window.$ = $;

in your common component.

[adriaandotcom]

I solved this by adding window.jQuery in ProvidePlugin:

  ...
  resolve: {
    alias: {
      jquery: require.resolve('jquery')
    }
  },
  plugins: [
    new webpack.ProvidePlugin({
      $: "jquery",
      jQuery: "jquery",
      "window.jQuery": "jquery"
    }),
  ],
  ...

And in the file where I used $("#sidebar").stick_in_parent({}) I added:

import $ from 'jquery'
import 'sticky-kit/dist/sticky-kit'

Make sure you don't link to jquery/src/jquery because require.resolve('jquery') links to dist.