'Uncaught ReferenceError: jQuery is not defined' with create-react-app

Question

Am building a React App using create-react-app so the app is server ready.

When importing a bootstrap javascript plugin such as 'affix.js', I get the error 'Uncaught ReferenceError: jQuery is not defined', and the page no longer loads.

Am importing all the modules through the index.js file since with the create-react-app it dosent seem to load the 'src' and 'link' imports from the index.html file.

Am importing the bootstrap plugin like so: import 'bootstrap/js/affix.js'

Have tried importing jquery in the following ways, at the top of the index.js file but none is working:

1. import jquery from 'jquery'
2. import jquery from 'jquery', window.$ = window.jQuery = jquery;
3. import jQuery from 'jquery'
4. import $ from 'jquery'
5. import 'jquery/dist/jquery.js';
6. require('./node_modules/jquery/dist/jquery.js')

Any ideas?

Solution 1

Create React App maintainer here.

import $ from 'jquery';

and then using

$.something()

should work fine if you are using jQuery 2.x or higher.

If it doesn't please file an issue.

---

In your examples, the problem might be that you wrote import jquery from 'jquery' but used jQuery as variable name. You should have written import jQuery from 'jquery' (or any other name as long as you use it consistently). Variable names are case sensitive in JavaScript.

Solution 2

In case someone land here. I had resolved similar issue for 'create-react-app' by using this:

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

and for importing other packages that needs jQuery you should import those packages after this, in affix.js case,

require 'bootstrap/js/affix.js';

Comments

[Mayank Shukla]

i think, don't import jquery in this way. Just put the cdn jquery link in html file, it should work. use this: <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jqu‌​ery.min.js"></script‌​>

[Sami El Maameri]

Thanks for the response. I already tried to " import $ from 'jquery' ", and it gives the same error. Also, regarding your previous comment, you can see the source code here where I currently am importing jquery via CDN (github.com/smaameri/keywords-finder). To test the bug you can remove remove the CDN link from index.html, and then try to import jquery as above in App.js. You will see the reference error. Will file issue as you said also.

[Bob Smith]

Doesnt seem to work for my create-react-app. When I load up the app and in the console type window.jQuery I get undefined.

[Bob Smith]

Using the CDN in my html file seems to be the only way I can get jQuery to load into my app.

[Michael Nelles]

Isn't there a little more to it than that?