create-react-app ReferenceError: jQuery is not defined

Question

Getting this error when using with create-react-app

ReferenceError: jQuery is not defined

I have this in my index.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
//import '../node_modules/jquery/dist/jquery.min.js';

import jQuery from 'jquery';
import '../node_modules/product-xxx/dist/js/product-xxx.min.js'; // this file uses jQuery

I already tried still no use

/* eslint-disable import/first */
window.jQuery = window.$ = $;

This works if I load jQuery from CDN in the public/index.html jQuery version is 3x

Any pointers?

Update

jQuery is used in the module product-xxx like this

+function(t) {
    "use strict";
    function e() {
        var t = document.createElement("bootstrap")
          , e = {
            WebkitTransition: "webkitTransitionEnd",
            MozTransition: "transitionend",
            OTransition: "oTransitionEnd otransitionend",
            transition: "transitionend"
        };
        for (var i in e)
            if (void 0 !== t.style[i])
                return {
                    end: e[i]
                };
        return !1
    }
    t.fn.emulateTransitionEnd = function(e) {
        var i = !1
          , o = this;
        t(this).one("bsTransitionEnd", function() {
            i = !0
        });
        var n = function() {
            i || t(o).trigger(t.support.transition.end)
        };
        return setTimeout(n, e),
        this
    }
    ,
    t(function() {
        t.support.transition = e(),
        t.support.transition && (t.event.special.bsTransitionEnd = {
            bindType: t.support.transition.end,
            delegateType: t.support.transition.end,
            handle: function(e) {
                return t(e.target).is(this) ? e.handleObj.handler.apply(this, arguments) : void 0
            }
        })
    })
}(jQuery)

maxadorable · Accepted Answer · 2018-08-23 07:29:34Z

2

To install jquery with npm

npm install jquery --save

After you do that, on every page you must have this where you are using jquery

import $ from 'jquery';

answered Aug 23, 2018 at 7:29

maxadorable

1,2821 gold badge10 silver badges24 bronze badges

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

Comments

mrale81 · Accepted Answer · 2018-08-23 05:41:01Z

0

Have you installed jquery in your package.json? May be you can try this How to use jQuery dependant plugins in create-react-app or this issue #679

answered Aug 23, 2018 at 5:41

mrale81

3291 gold badge5 silver badges17 bronze badges

2 Comments

phantomCoder Over a year ago

Its already there in package.json under dependencies "jquery": "^3.3.1",

McRist Over a year ago

@mrale81 don't put questions in answers, if you have questions, ask them in the comments.

UXDart · Accepted Answer · 2018-08-23 05:20:25Z

-1

you need to use import jQuery from 'jquery'; in every file that you are using it

answered Aug 23, 2018 at 5:20

UXDart

2,64017 silver badges12 bronze badges

3 Comments

phantomCoder Over a year ago

My understanding is src/index.js does that. I have also included it every file but not working.

UXDart Over a year ago

you need to add the jquery import inside the product-xxx js file

UXDart Over a year ago

anyway it will be better if you use a cdn version, and then use in your code window.jQuery

Collectives™ on Stack Overflow

create-react-app ReferenceError: jQuery is not defined

3 Answers 3

Comments

2 Comments

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

2 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related