Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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'
like image 366
A. L Avatar asked Jan 24 '17 00:01

A. L


People also ask

Can I import jQuery in React?

React Using ReactJS with jQuery ReactJS with jQuery Firstly, you have to import jquery library . We also need to import findDOmNode as we're going to manipulate the dom. And obviously we are importing React as well.

How use jQuery function in react JS?

Our jQuery app initially creates the React component using a call to React. createElement and passing in the context of the jQuery app to the components constructor. The component can then store the reference (available via the props argument) in its state and use it to update key elements on the web page.

Is not defined Javascript React?

The React. js error "X is not defined react/jsx-no-undef" occurs when we forget to import a function, class or a variable in our code before using it. To solve the error, make sure to import the value before using it in your code, e.g. import {myFunc} from 'my-package' . Copied!


Video Answer


4 Answers

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

like image 56
blackmiaool Avatar answered Oct 17 '22 13:10

blackmiaool


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

plugins: [
  new webpack.ProvidePlugin({
    jQuery: 'jquery',
    $: 'jquery'
  })
],
like image 23
tkhm Avatar answered Oct 17 '22 11:10

tkhm


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.

like image 31
Venkatesh Somu Avatar answered Oct 17 '22 11:10

Venkatesh Somu


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:

  • React data grid
  • Integrate DataTables with ReactJS (note destroy option is used to get it to work)
  • Facebook FixedDataTable
  • NPM react-bootstrap-datatable

DataTables related discussions:

  • DataTable with ReactJS
  • Anyone use DataTables with ReactJS?
like image 1
Syden Avatar answered Oct 17 '22 13:10

Syden