Create-react-app: jQuery plugin says "jQuery is not defined"

[chaseWillden]

I have run the following command line arguments:
npm install --save jquery
npm install --save jquery-slimscroll

Inside of my index.js file, the first three lines import these modules:

import $ from 'jquery';
window.jQuery = $;
import 'jquery-slimscroll';

But I receive the following error:

jquery.slimscroll.js:474 Uncaught ReferenceError: jQuery is not defined

Any suggestions?

[cloudmu]

import jquery from 'jquery';
window.$ = window.jQuery=jquery;

[chaseWillden]

Alright, now when I do:

import jquery from 'jquery';
window.$ = window.jQuery = jquery;
import 'jquery-slimscroll';

I still get the same error message:

jquery.slimscroll.js:474 Uncaught ReferenceError: jQuery is not defined

[cloudmu]

require('jquery-slimscroll');

instead of

import 'jquery-slimscroll';

[chaseWillden]

Wow that was it. I didn't realize there was a difference between import and require in this case. Thanks for your help.

[cloudmu]

Went through this debugging exercise before. Here was my observation of the babel transpired js:

• babel respects the order of requires, along with other statements.
• babel will put the imports at the top, before other statements ( in this case window.$ = window.jQuery = jquery;), which caused the issue.

There are probably some intricate reasons of babel's behavior, but I should stop being an ultracrepidarian ;-)

[gaearon]

Seems like the problem is that jquery-slimscroll apparently doesn’t attempt to do require('jquery') even though it’s on npm. 😢

There are probably some intricate reasons of babel's behavior, but I should stop being an ultracrepidarian ;-)

Yes, per ES6 spec imports always execute first.

[danf14]

https://www.merriam-webster.com/words-at-play/polite-words-for-impolite-people/