How to use jQuery dependant plugins in create-react-app

Question

I want to use bootstrap and other jQuery plugins (datepicker, carousel, ...) in my React app which uses create-react-app.

Here is how I import jQuery and bootstrap:

import React, { Component } from 'react';
import 'bootstrap/dist/css/bootstrap.min.css';
import $ from 'jquery';
window.jQuery = window.$ = $;
import 'bootstrap/dist/js/bootstrap.min';

And I get the following error:

./src/App.js
  Line 5:  Import in body of module; reorder to top  import/first

Search for the keywords to learn more about each error.

Note that I don't want to use react-bootstrap package.

Answer 1

In this case for using bootstrap or bootstrap-datepicker I needed to require it instead of importing it.

import React, { Component } from 'react';
import 'bootstrap/dist/css/bootstrap.min.css';
import $ from 'jquery';
window.jQuery = window.$ = $;
require('bootstrap');
require('bootstrap-datepicker');

Answer 2

to avoid having to require, one can also create a separate file to load jquery, eg.

jquery-loader.js:

import $ from "jquery"

window.$ = $
window.jQuery = $

and then

import React, { Component } from 'react';
import 'bootstrap/dist/css/bootstrap.min.css';
import './jquery-loader';
import 'bootstrap';
import 'bootstrap-datepicker';