title: Bootstrap react ./node_modules/bootstrap/dist/js/bootstrap.min.js Module not found: Can't resolve 'jquery'
body: <p>Error :
  I am geeting following error while adding navbar using bootstrap.</p>
  <p>If I did not import jquery part it works but collapsing is not working but when I added jquery part it is giving following error</p>
  <blockquote>
  <p>./node_modules/bootstrap/dist/js/bootstrap.min.js Module not found:
  Can't resolve 'jquery' in
  'D:\react\covid\client\node_modules\bootstrap\dist\js'</p>
  </blockquote>
  <p>Navbar component</p>
  <pre><code>import React from &quot;react&quot;;
  
  const Navbar = () =&gt; {
    return (
      &lt;div&gt;
        &lt;nav className=&quot;navbar navbar-expand-md navbar-dark bg-dark&quot;&gt;
        &lt;div className=&quot;container&quot;&gt;
          &lt;a className=&quot;navbar-brand&quot; href=&quot;#&quot;&gt;
            Covid Info
          &lt;/a&gt;
          &lt;button
            className=&quot;navbar-toggler&quot;
            type=&quot;button&quot;
            data-toggle=&quot;collapse&quot;
            data-target=&quot;#navbarSupportedContent&quot;
            aria-controls=&quot;navbarSupportedContent&quot;
            aria-expanded=&quot;false&quot;
            aria-label=&quot;Toggle navigation&quot;
          &gt;
            &lt;span className=&quot;navbar-toggler-icon&quot;&gt;&lt;/span&gt;
          &lt;/button&gt;
  
          &lt;div className=&quot;collapse navbar-collapse justify-content-end&quot; id=&quot;navbarSupportedContent&quot;&gt;
            &lt;ul className=&quot;navbar-nav ml-auto&quot;&gt;
              &lt;li className=&quot;nav-item active ml-3&quot;&gt;
                &lt;a className=&quot;nav-link&quot; href=&quot;www.google.com&quot;&gt;
                  Home &lt;span className=&quot;sr-only&quot;&gt;(current)&lt;/span&gt;
                &lt;/a&gt;
              &lt;/li&gt;
              &lt;li className=&quot;nav-item ml-3&quot;&gt;
                &lt;a className=&quot;nav-link&quot; href=&quot;#&quot;&gt;
                  Oxygen
                &lt;/a&gt;
              &lt;/li&gt;
              &lt;li className=&quot;nav-item ml-3&quot;&gt;
                &lt;a className=&quot;nav-link&quot; href=&quot;#&quot;&gt;
                  Beds
                &lt;/a&gt;
              &lt;/li&gt;
              &lt;li className=&quot;nav-item ml-3&quot;&gt;
                &lt;a className=&quot;nav-link&quot; href=&quot;#&quot;&gt;
                  Helpline
                &lt;/a&gt;
              &lt;/li&gt;
            &lt;/ul&gt;
          &lt;/div&gt;
          &lt;/div&gt;
        &lt;/nav&gt;
      &lt;/div&gt;
    );
  };
  
  export default Navbar;
  
  
  </code></pre>
  <p>App component</p>
  <pre><code>import React from &quot;react&quot;;
  import Navbar from &quot;./components/Navbar&quot;;
  
  function App() {
    return (
      &lt;div className=&quot;App&quot;&gt;
        &lt;Navbar /&gt;
      &lt;/div&gt;
    );
  }
  
  export default App;
  
  
  </code></pre>
  <p>index.js component</p>
  <pre><code>import React from 'react';
  import ReactDOM from 'react-dom';
  import './index.css';
  import App from './App';
  import &quot;../node_modules/jquery/dist/jquery.min.js&quot;;
  import &quot;../node_modules/bootstrap/dist/js/bootstrap.min.js&quot;;
  
  ReactDOM.render(
    &lt;React.StrictMode&gt;
      &lt;App /&gt;
    &lt;/React.StrictMode&gt;,
    document.getElementById('root')
  );
  
  
  
  </code></pre>