jQuery not working (ReactJS, Bootstrap, Webpack)

Question

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.

Webpack's production config file: https://pastebin.com/vb69MRug
Webpack's development config file: https://pastebin.com/YwE7cuUf

What is going on?

Robbie Milejczak · Accepted Answer · 2017-11-10 13:27:58Z

-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.

answered Nov 10, 2017 at 13:27

Robbie Milejczak

5,8203 gold badges37 silver badges68 bronze badges

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

2 Comments

Jesús Fuentes Over a year ago

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.

Robbie Milejczak Over a year ago

have you seen this? stackoverflow.com/questions/37932454/…

Collectives™ on Stack Overflow

jQuery not working (ReactJS, Bootstrap, Webpack)

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related