Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

307
Views
reactjs, bootstrap and npm import - jQuery is not defined

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'
over 4 years ago · Santiago Trujillo
3 answers
Answer question

0

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

over 4 years ago · Santiago Trujillo Report

0

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

plugins: [
  new webpack.ProvidePlugin({
    jQuery: 'jquery',
    $: 'jquery'
  })
],
over 4 years ago · Santiago Trujillo Report

0

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.

over 4 years ago · Santiago Trujillo Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!