3

Using a create-react-app ejected project.

I'm following this other stackoverflow answer: Using Jquery and Bootstrap with Es6 Import for React App

The problem is that jQuery isn't working at all in in production mode, even tho Bootstrap doesn't throw the error that jQuery isn't available.

main.js:

// CSS
import 'bootstrap/dist/css/bootstrap.min.css';
import './theme/css/style.css';
import 'font-awesome/css/font-awesome.min.css';

// JS
import 'jquery';
import 'bootstrap/dist/js/bootstrap';

element that uses bootstrap+jquery:

<li id="user-menu" class="dropdown menu-merge pull-right">
  <a aria-expanded="false" class="dropdown-toggle" data-toggle="dropdown">
    <span>User</span>
    <span class="caret ml10"></span>
  </a>
  <ul class="dropdown-menu w225" role="menu">
    <li>
      <a href="/admin/instance">
        <span class="icon icon-Gear mr10"></span>
          Config
      </a>
    </li>
  </ul>
</li>

It simply won't open, unlike using webpack dev config, where it does.

What is going on?

Jesús Fuentes
  • 919
  • 2
  • 11
  • 33

1 Answers1

-1

Shouldn't your jQuery import be:

import $ from 'jquery'; instead of import 'jquery'

Also why not use React-Bootstrap instead? This doesn't seem worth the trouble.

Robbie Milejczak
  • 5,664
  • 3
  • 32
  • 65
  • No, using your way you're assigning all the jQuery functionality to $ var but only in the main.js file and bootstrap needs it as a global, that's why I'm using the ProvidePlugin in the Webpack configuration. We're not using React-Bootstrap (yet) because the API isn't consistent yet and other team reasons. – Jesús Fuentes Nov 10 '17 at 13:35
  • have you seen this? https://stackoverflow.com/questions/37932454/jquery-needed-for-bootstrap-in-react-project – Robbie Milejczak Nov 10 '17 at 13:56