0

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>
brauliopf
  • 61
  • 1
  • 2
  • 11

2 Answers2

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.

Sachin
  • 1,206
  • 12
  • 13
0

In console, run:

npm install jquery

In javascript file:

import $ from 'jquery'
Sa1m0n
  • 710
  • 7
  • 14
  • 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. – brauliopf Apr 07 '20 at 16:20
  • Try to delete all Bootstrap links in index.html and install bootstrap with npm https://www.npmjs.com/package/bootstrap – Sa1m0n Apr 07 '20 at 16:23
  • 1
    Thank you! Removing the manual imports in the index.html and importing with the bootstrap npm module solved my issue. – brauliopf Apr 07 '20 at 18:08