How to load $ function from jQuery in React app (CRA)? [duplicate]

Question

I have a CRA app which loads bootstrap in the index.html file, configured as below. The problem is that I can not use the jQuery function "$" in other modules I'm creating. For example, in my home, I just tried a simple console.log($("#home").text()) and got the following error: Line 8:20: '$' is not defined no-undef.

How to make use of jQuery in my react app?

home

const Home = () => {

  return (
    <div id='home'>
      <h4 className="display-4 mb-2">Home page</h4>
      {console.log($("#home").text())}
    </div>
  )
}

index.html

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <meta name="theme-color" content="#000000" />

  <!-- Bootstrap CSS -->
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
    integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
  <!-- FontAwesome CSS -->
  <script src="https://kit.fontawesome.com/0f025a544f.js" crossorigin="anonymous"></script>

  <title>MMG</title>
</head>

<body>
  <div id="root"></div>
  <!-- Bootstrap JS -->
  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
    integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
    crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
    integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
    crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
    integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
    crossorigin="anonymous"></script>
</body>

</html>

Sachin · Accepted Answer · 2020-04-07 16:25:06Z

1

Install the jquery using

npm install jquery --save

Now, import $ from jquery into your jsx file where you need to use jquery

import $ from "jquery";

Now you can select DOM by $ sign in your life cycle methods.

answered Apr 7, 2020 at 16:25

Sachin

1,43315 silver badges17 bronze badges

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

Comments

Sa1m0n · Accepted Answer · 2020-04-07 16:15:12Z

0

In console, run:

npm install jquery

In javascript file:

import $ from 'jquery'

answered Apr 7, 2020 at 16:15

Sa1m0n

8261 gold badge9 silver badges15 bronze badges

3 Comments

brauliopf Over a year ago

This will generate a conflict with the lib I load in my index.html file, that is used to load my bootstrap library. I don't know how to handle this conflict.

Sa1m0n Over a year ago

Try to delete all Bootstrap links in index.html and install bootstrap with npm npmjs.com/package/bootstrap

brauliopf Over a year ago

Thank you! Removing the manual imports in the index.html and importing with the bootstrap npm module solved my issue.

Collectives™ on Stack Overflow

How to load $ function from jQuery in React app (CRA)? [duplicate]

2 Answers 2

Comments

3 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

3 Comments

Linked

Related