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.

Sohrab Taee · Accepted Answer · 2017-05-20 16:55:23Z

19

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');

answered May 20, 2017 at 16:55

Sohrab Taee

7601 gold badge10 silver badges30 bronze badges

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

1 Comment

Morio Over a year ago

You saved my day!

licancabur · Accepted Answer · 2019-10-31 14:30:45Z

7

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

answered Oct 31, 2019 at 14:30

licancabur

6455 silver badges11 bronze badges

Collectives™ on Stack Overflow

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

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related