'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:

import jquery from 'jquery'
import jquery from 'jquery', window.$ = window.jQuery = jquery;
import jQuery from 'jquery'
import $ from 'jquery'
import 'jquery/dist/jquery.js';
require('./node_modules/jquery/dist/jquery.js')

Any ideas?

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/jquery.min.js"></script> — Mayank Shukla
– Mayank Shukla, Commented Jan 23, 2017 at 6:28
@MayankShukla thanks this worked! Finally. I tried lots of other ways before. I guess it is related to the way the index.html scans the folders directories when part of the create-react-app. So CDN would work in that case. Thanks! Could you post this as an official answer also? You just saved me rebuilding the app bottom up using expressJS, which I was going to do via tutorial since I have not built a nodeJs or expressJs app before :) you probably saved me like half a day. Thanks! — Sami El Maameri
– Sami El Maameri, Commented Jan 23, 2017 at 8:04
@MayankShukla also any ideas as to why my import methods above were not working? — Sami El Maameri
– Sami El Maameri, Commented Jan 23, 2017 at 8:12
Also btw the CDN you proided led to a dead URL for me. Used the ones provided at code.jquery.com instead. — Sami El Maameri
– Sami El Maameri, Commented Jan 23, 2017 at 8:22
No, you don't need CDN for this. Unfortunately you haven't provided the full code reproducing the issue so I can't say what exactly went wrong. Please see my answer. — Dan Abramov
– Dan Abramov, Commented Jan 23, 2017 at 21:25

Dan Abramov · Accepted Answer · 2017-01-23 21:29:04Z

9

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.

edited Jan 23, 2017 at 21:29

answered Jan 23, 2017 at 21:23

Dan Abramov

269k87 gold badges417 silver badges523 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Sami El Maameri Over a year ago

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.

Upasana · Accepted Answer · 2017-07-04 15:43:20Z

5

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';

answered Jul 4, 2017 at 15:43

Upasana

1,9751 gold badge16 silver badges18 bronze badges

2 Comments

Bob Smith Over a year ago

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 Over a year ago

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

Moustafa · Accepted Answer · 2020-04-14 14:16:14Z

0

You can copy jquery.js file in react "public" folder and import it in your index.html file

answered Apr 14, 2020 at 14:16

Moustafa

1

1 Comment

Michael Nelles Over a year ago

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

Vladimir Simoes da Luz Junior · Accepted Answer · 2022-02-22 16:51:27Z

0

Solved it by editing index.html

Had a similar issue while trying to use jQuery inside the InnerHTML component. What solved the problem whas to import it`s source inside index.html:

<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script>

answered Feb 22, 2022 at 16:51

Vladimir Simoes da Luz Junior

9077 silver badges8 bronze badges

Collectives™ on Stack Overflow

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

4 Answers 4

1 Comment

2 Comments

1 Comment

Solved it by editing index.html

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

2 Comments

1 Comment

Solved it by editing index.html

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related