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

user_3752067 0
Viewed 8987

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.

npm create-react-app webpack import jquery
2 Answers

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';
user_20808030
Related