admin管理员组文章数量:1327291
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=".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'
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'
Share
Improve this question
edited Apr 28, 2017 at 13:03
blackmiaool
5,3442 gold badges23 silver badges39 bronze badges
asked Jan 24, 2017 at 0:29
A. LA. L
12.6k29 gold badges97 silver badges177 bronze badges
13
|
Show 8 more comments
4 Answers
Reset to default 24 +50import bootstrap from 'bootstrap'
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
Are you using webpack? If so, add this on your webpack.config.js
.
plugins: [
new webpack.ProvidePlugin({
jQuery: 'jquery',
$: 'jquery'
})
],
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.
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?
本文标签: javascriptReactJSbootstrap and npm importjQuery is not definedStack Overflow
版权声明:本文标题:javascript - reactjs, bootstrap and npm import - jQuery is not defined - Stack Overflow 内容由网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:http://www.betaflare.com/web/1738063891a2057586.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
node
command, and typerequire('jquery')
in REPL, does it return a function? Asking just to make sure you have this dependency added to yarn lockfile. – rishat Commented Jan 24, 2017 at 1:42create-react-app
withjQuery
recently, it's notreact-react-app
side problem. – Allen Commented Jan 24, 2017 at 3:24$("#select");
works. It's mainly an issue with DataTables as it requires jQuery to be visible/usable by the window/global – A. L Commented Jan 24, 2017 at 3:33