jQuery无法正常工作（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?

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