title: React Error : __WEBPACK_IMPORTED_MODULE_4_jquery___default(...)(...).modal is not a function
body: <p>I'm working on a react project with Bootstrap 4. Bootstrap has been imported through CDN.</p>
  
  <pre><code>&lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"&gt;
  &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"&gt;&lt;/script&gt;
  </code></pre>
  
  <p>what I wanted is to show/hide a modal if a condition is satisfied. I have already imported jquery also using </p>
  
  <pre><code>npm install jquery --save
  </code></pre>
  
  <p>in component </p>
  
  <pre><code>import $ from 'jquery'; &lt;-to import jquery
  
  $('#addSupModal').modal('show'); &lt;- to show modal
  </code></pre>
  
  <p>but during the execution time when the above line gets executed, it shows an error like</p>
  
  <pre><code>Unhandled Rejection (TypeError): __WEBPACK_IMPORTED_MODULE_4_jquery___default(...)(...).modal is not a function
  </code></pre>
  
  <p>I read about this error and it says maybe because jquery is imported twice with CDN and npm. I don't know for sure what the reason. But I also tried importing jquery from only one method but it doesn't work. Any suggestions?</p>