reactjs，bootstrap和npm导入-jQuery未定义 [英] reactjs, bootstrap and npm import - jQuery is not defined

问题描述

我正在尝试在我的react应用中使用引导程序，但这给了我一个错误：Bootstrap的JavaScript需要jQuery 。我已经导入了jquery，并尝试从其他帖子中尝试以下操作：

  import‘jquery’; 
 window.jQuery = $; 
窗口。$ = $; 
 global.jQuery = $; 
  

但是，我仍然得到未定义错误。

解决此问题的唯一方法是放入

  src = https://code.jquery.com/jquery-3.2.1.min.js 
完整性= sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4 = 
 crossorigin = anonymous>< / script> ; 
  

进入index.html

一种导出jquery或使bootstrap能够检测/读取它的方法？

我通过

<$来调用我的bootstrap p $ p> 从'bootstrap'
导入引导程序

解决方案

从'bootstrap'导入引导程序

const bootstrap = require（'bootstrap'）;

我试图用 create-react-app构建一个项目，发现导入模块的加载顺序与导入顺序不同。这就是boostrap无法找到jquery的原因。通常，您可以在这种情况下使用要求。

 从 jquery导入$； 
 window.jQuery = $; 
窗口。$ = $; 
 global.jQuery = $; 
 const bootstrap = require（'bootstrap'）; 
 console.log（bootstrap）
  

相关内容：

进口已悬挂

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

进口应该先走

值得注意的是，导入是悬挂的，这意味着导入的模块将在任何语句穿插之间进行评估他们。将所有导入文件放在文件的顶部可能会防止由于这部分规范而引起意外。

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

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'

解决方案

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

这篇关于reactjs，bootstrap和npm导入-jQuery未定义的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！