12

I'm trying to use bootstrap in my react app, but it gives me aError: Bootstrap's JavaScript requires jQuery. I have imported jquery and have tried tried the following from other posts: 

import $ from 'jquery';
window.jQuery = $;
window.$ = $;
global.jQuery = $;

However, I still get the not defined error.

The only way to fix this is to put

  src="https://code.jquery.com/jquery-3.2.1.min.js"
  integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
  crossorigin="anonymous"></script>

into index.html

is there a way to export jquery or have bootstrap be able to detect/read it?

I call my bootstrap via

import bootstrap from 'bootstrap'
Improve this question
13
  • If you go to your project folder, run node in CLI with node command, and type require('jquery') in REPL, does it return a function? Asking just to make sure you have this dependency added to yarn lockfile. Commented Jan 24, 2017 at 1:42
  • Just used create-react-app with jQuery recently, it's not react-react-app side problem. Commented Jan 24, 2017 at 3:24
  • @RishatMuhametshin Yes it returns a function Commented Jan 24, 2017 at 3:32
  • @Xlee I can use jquery inside the react part, e.g $("#select"); works. It's mainly an issue with DataTables as it requires jQuery to be visible/usable by the window/global Commented Jan 24, 2017 at 3:33
  • Where do you put your bootstrap js? Please post your more html content. Commented Mar 27, 2017 at 10:24

4 Answers 4

Reset to default
24
+50

import bootstrap from 'bootstrap'

const bootstrap = require('bootstrap');

I tried to build a project with "create-react-app" and found that the loading order of imported modules is not same with importing order. And this is the reason why boostrap can't find jquery. Generally, you can use "require" in this condition. It works on my pc.

import $ from 'jquery';
window.jQuery = $;
window.$ = $;
global.jQuery = $;
const bootstrap = require('bootstrap');
console.log(bootstrap)

Relevant things:

imports are hoisted

https://stackoverflow.com/a/29334761/4831179

imports should go first

Notably, imports are hoisted, which means the imported modules will be evaluated before any of the statements interspersed between them. Keeping all imports together at the top of the file may prevent surprises resulting from this part of the spec.

from https://github.com/benmosher/eslint-plugin-import/blob/master/docs/rules/first.md

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

1 Comment

weird how I can't use import bootstrap from 'bootstrap';
5

Are you using webpack? If so, add this on your webpack.config.js.

plugins: [
  new webpack.ProvidePlugin({
    jQuery: 'jquery',
    $: 'jquery'
  })
],
Improve this answer

2 Comments

Unfortunately, I'm using create-react-app, so I don't think I can configure the webpack stuff. I'm going to try eject it and see what happens.
You are using create-react-app, not webpack. In that case, how about var $ = require('jquery'); and window.$ = $;, window.jQuery = $; I'm sorry I'm not well why it works, but might be help, maybe.
3

When using create-react-app, First You need to install the Jquery package like this.

sudo npm install jquery --save

and react-bootstrap like this 

 sudo npm install react-bootstrap --save

Now in the JS files you can use both jquery and bootstrap like this.

 import $ from 'jquery';
 import { Carousel, Modal,Button, Panel,Image,Row,Col } from 'react-bootstrap';

you can use this url for react bootstrap components https://react-bootstrap.github.io/components.html

you can use Buttons with onclick function like this

<Button bsStyle="primary" bsSize="large" active onClick={this.getData()}>Sample onClick</Button>

in the 

 getData(){
 $.ajax({
   method: 'post',
   url:'http://someurl/getdata',
   data: 'passing data if any',
   success: function(data){
      console.log(data);
      alert(data);
      this.setState({
         some: data.content,
         some2: data.content2,
      });
   },
   error: function(err){
      console.log(err);
   }
 });

all of this is basic example using jquery and bootstrap if you need more you can write comments about this.

Improve this answer

3 Comments

was hoping more of a way to use it with the standard bootstrap as I'm a little more familiar with that. Only thing not working with the normal bootstrap is importing jQuery, which works if I do it in the HTML head.
after installing the react bootstrap you can also use the normal bootstrap components like writing the css class names to the div elements.by giving the bootstrap cdn in your header file.The basic problem you will face is it will load for the first time fine,later in the routings of next page the bootstrap may cause problems like not loading correctly.
Please don't use sudo for npm installs…
1

EDIT: I see from your comments your issue seems to be on integrating datatables with jquery, you should consider re-formulating your question.

Bear in mind React uses a virtual DOM, and jQuery plays entirely in the DOM.

So considering that, it seems near impossible to get DataTables & jQuery to play nice all around. You could get DataTables displayed, but when you do anything else with React, it basically goes back to using its own virtual DOM, which would mess with the DataTables.

Some react friendly datatables alternatives:

DataTables related discussions:

Improve this answer

2 Comments

well the thing is, I can get it to work by putting jquery into the index.html header. Just doesn't feel right since I've npm installed jquery
@A.Lau yes, I agree not ideal considering npm but seems to be the only workaround so far. I'd say that if it benefits your project without any downsides, go ahead and load it via html's head.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.