Bootstrap 4: Uncaught ReferenceError: Popper is not defined 错误

解决Bootstrap4 Popper.js 引用错误
最新推荐文章于 2025-05-18 13:45:19 发布
原创 最新推荐文章于 2025-05-18 13:45:19 发布 · 3.1k 阅读 · 3 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文介绍了解决Bootstrap4项目中因未正确引入Popper.js而导致的'Popper is not defined'错误的方法。需确保使用UMD版本的Popper.js，并在加载Bootstrap前完成其引入。

错误：

最近项目中引入Bootstrap 时报错：Uncaught ReferenceError: Popper is not defined 


原因：

Bootstrap 4 中 bootstrap.bundle.js 存在对 Popper.js 的引用，因此需要在引入Bootstrap之前引用 Popper.js  文件


需要注意的是，必须是 UMD  版本的  Popper.js  文件文件，否则会报错：Uncaught SyntaxError: Unexpected token export


    


popper.js 下载地址： https://cdnjs.com/libraries/popper.js

  Bootstrap v4.1.0  选择   1.14.0 popper.js

    

子澈课堂
关注
webpack4 配置 ssr 环境遇到“document is not defined”
01-21
ReferenceError: document is not defined 本次package.json使用版本信息： { vue-loader: ^15.4.2, mini-css-extract-plugin: ^0.4.3, webpack: ^4.20.2, webpack-cli: ^3.1.2 ... } 相关代码 问题原因： ...
bootstrap is not definedReferenceError: bootstrap is not defined at VueComponent.closeModel (we
m0_62943934的博客
09-08 545
const myModal = new bootstrap.Modal(document.getElementById('LoginPages'))报错。
出现Uncaught ReferenceError: $ is not defined错误
Small-J
09-21 3538
今天在写ajax请求的时候，出现了Uncaught ReferenceError: $ is not defined报错；$未定义是为什么呢？ 后来才知道， 原因一：你未引用jquery库jquery.min.js文件，或者说路径错误； 原因二：忽略了HTML中
angular7使用bootstrap3中的轮播，一直报 $ is not defined
inprivacy的博客
09-10 669
引入jQuery没问题 引入bootstrap没问题 照着文档上来的 轮播组件中 .ts文件 declare var $:any; 一切都没问题 就是显示 $ is not defined ，不能轮播 最后，重新引入了一下jQuery，还是在原来的位置引入 结果 成功了 可以轮播了！！！ 其实没啥什么技术上的问题，就是重新引入了一下jQuery ，划重点，划重点，重要的事情说...
JS 一直报 Uncaught ReferenceError: is not defined 错误解决方式
热门推荐
wanganji5252的博客
11-26 7万+
在写项目时 运用了一个js函数 死活执行不了 一直报 is not defined错误 经过排查 发现了两处错误问题 第一处 原因是引入jquery.js顺序不对 jquery.js要放在其它js之前。 <script src="__ADMIN__/js/jquery.js" language="JavaScript" type="text/javascript"><...
jQuery报错：Uncaught ReferenceError: $ is not defined
weixin_34240520的博客
09-18 279
在做一个chrome上插件的时候，写popup.js时候发现$不能用，我以为在manfest.json上配好jquery-mini-2.0.js就可以了，其实不是，仍然需要在调用他的html即popup.html上配置jquery-mini-2.0.js的路径<script src="js/jquery-2.1.1.min.js"></script> 参考文章htt...
出现 Uncaught ReferenceError: process is not defined 错误
主攻大数据 人工智能 物联网 安全 低空经济等方向。mtsc 、gtest特邀分享嘉宾
05-18 1960
在浏览器环境中，process对象是 Node.js 环境特有的，因此当你在浏览器中运行代码时，会出现错误。这个错误是因为代码里使用了，而浏览器环境下并没有process对象。
【BUG已解决】Uncaught ReferenceError: jQuery is not defined
haohaoxuexiyai的博客
10-20 9217
今天在用jQuery写二维码模块的时候，遇到了一个 Uncaught ReferenceError: jQuery is not defined 的异常抛出，检查了一下所需要的js依赖都已经导入了。 引入外部js <script type="text/javascript" charset="UTF-8" src="js/jquery.qrcode.js"></script> <script src="js/jquery2.1.4.js"></script>
【Bootstrap 5.13 - Uncaught TypeError: Popper__namespace.createPopper is not a function】的解决方法
weixin_43727933的博客
08-14 3363
在使用bootstrap5以上版本中虽然可以不使用jquery就可以正常工作，然而它的字段验证又是收费的，在这方面只好重新使用用jquery，自已封装一个验证字段模块来取代FormValidation,即使FormValidation在好但囊中羞涩。在使用中却出现了一个让人无法想象的错误，在加载bootstrap.js时console总是报错。...
Uncaught ReferenceError: bootstrap is not defined
06-06
这个错误通常是因为 Bootstrap 的 JavaScript 文件没有被正确加载所导致的。请确保已经正确引入了 Bootstrap 的 JavaScript 文件，并且文件路径正确。你可以通过检查浏览器的开发者工具来查看是否有加载错误或者文件...
pageOffice的集成与使用pageOffice的错误：ReferenceError: POBrowser is not defined
sherazade的博客
03-22 1万+
第一步，去官网下载pageoffice插件，网址：http://www.zhuozhengsoft.com/dowm/ 我下载的是PageOffice完整程序包（PageOffice 4.5 for JAVA ），打开以后有demo（Samples4文件夹），有jar包和web.xml的配置（集成文件），安装说明，开发文档。 其中，将Samples4放入Tomcat的webapps文件夹中，然...
解决报错Uncaught ReferenceError: $ is not defined at index.html
cuizongliang123的博客
10-17 9449
出现此情况的原因 (一)， jquery.js放在自定义的或者bootstrap.js 前面，因为js依赖JQuery. (二),jquery库加载不成功，检查下引用的路径是否正确 (三)，检查引用的位置 (四)，假如路径没有错，可能是浏览器解析js的时候没有加载jQuery，需要将jquery引用的文件放在<head>标签中。 出错前： 修改后： ...
Uncaught ReferenceError: xxx is not define异常的解决方案
2301_79779756的博客
05-10 5798
在JavaScript编程中，Uncaught ReferenceError: xxx is not defined 是一种常见的运行时错误。这个错误通常表明代码尝试访问一个未声明的变量、函数或对象属性。当JavaScript引擎在当前的执行上下文中找不到指定的标识符时，就会抛出这个错误。
Uncaught ReferenceError: XXX is not defined
m0_64842990的博客
12-09 2万+
前端报错解决：Uncaught ReferenceError: XXX is not defined
如何解决Uncaught ReferenceError: process is not defined
qq_41768945的博客
01-12 2853
将此添加到您的 package.json "resolutions": { "//": "See https://github.com/facebook/create-react-app/issues/11773", "react-error-overlay": "6.0.9" } 删除您的yarn.lock or package-lock.json，然后再次安装您的依赖项。
解决前端报错xxx is not defined ReferenceError: xxx is not defined错误
bky13353265651的博客
03-15 3307
首先去寻找该类是否在public/js下进行定义，如未定义，则需要编写该xxx.js文件。
正确解决Uncaught ReferenceError: xxx is not define异常的有效解决方法
wbajsjhhhhh的博客
05-03 1万+
正确解决Uncaught ReferenceError: xxx is not define异常的有效解决方法
js出现Uncaught ReferenceError: XXX is not defined错误的解决办法
weixin_57666779的博客
07-15 6万+
1.window.onload事件是在整个页面包括dom结构、图片等等全部加载完成之后才会触发。2.如果将你自己的函数写在window.onload里，那么这个函数的作用域就仅仅是window.onload中，该函数是在一个匿名函数内部的局部函数，并不是全局函数，所以你调用时会显示未定义，类似java那个内部类。3.HTML加载时由上往下的，在HTML加载的时候，遇到function关键字，声明一个函数的时候，就会在内存中开辟一个新的空间来对函数进行存储，方便以后进行调用。
JavaScript错误之：Uncaught ReferenceError: $ is not defined
任天柳
01-31 6万+
相关知识介绍——JS中常见的六种错误： 1. SyntaxError：语法错误 1 2 3 4 5 6 // 1. Syntax Error: 语法错误 // 1.1 变量名不符合规范 var 1       // Uncaught SyntaxError: Unexpected number var...
Uncaught ReferenceError: bootstrap is not defined at
最新发布
07-21
<think>我们正在解决的是“Uncaught ReferenceError: bootstrap is not defined”错误。 根据引用[1]和引用[2]的内容，这个错误通常是由于Bootstrap的JavaScript依赖（如jQuery）没有正确加载，或者Bootstrap本身没有加载导致的。 引用[1]明确指出：Bootstrap的JavaScript插件都依赖jQuery，所以jQuery必须在Bootstrap之前引入。 错误原因分析： 1. 未引入jQuery：Bootstrap的JavaScript需要jQuery，如果没有引入jQuery，则会出现此错误。 2. 引入顺序错误：如果jQuery在Bootstrap之后引入，那么Bootstrap在初始化时找不到jQuery，也会报错。 3. 路径错误：如果jQuery或Bootstrap的路径不正确，导致文件没有加载成功。 4. 使用Bootstrap 5时不需要jQuery，但如果是Bootstrap 3或4，则必须要有jQuery。 解决方案： 1. 确保已正确引入jQuery（如果使用的是Bootstrap 3或4）： - 在引入Bootstrap的JavaScript文件之前，必须先引入jQuery。 2. 检查文件路径是否正确： - 确保src属性中的路径是有效的，并且文件可以访问。 3. 检查网络请求： - 在浏览器的开发者工具（Network选项卡）中查看jQuery和Bootstrap的js文件是否成功加载（状态码200）。 4. 如果使用Bootstrap 5，则不需要jQuery，但需要确保没有混合使用旧版本的Bootstrap。 正确代码示例（Bootstrap 3或4）： ```html <!-- 先引入jQuery --> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <!-- 再引入Bootstrap的JS --> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script> ``` 如果使用Bootstrap 5： ```html <!-- Bootstrap 5 不需要jQuery，直接引入Bootstrap的JS --> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script> ``` 注意：在Bootstrap 5中，我们通常使用bootstrap.bundle.min.js，它包含了Popper.js。 另外，引用[3]提到了一个关于Electron环境中process未定义的错误，但当前问题不涉及Electron，所以这个引用可以忽略。 如果问题仍然存在，可以尝试以下步骤： 1. 清除浏览器缓存。 2. 检查浏览器控制台是否有其他错误（比如网络错误导致jQuery没有加载）。 3. 确保没有重复引入多个版本的jQuery或Bootstrap。 数学表达： - 错误发生的条件：设$t$为脚本加载时间，$t_j$为jQuery加载完成时间，$t_b$为Bootstrap加载完成时间，则当$t_j > t_b$时，错误发生概率$P(error)=1$（因为Bootstrap在jQuery之前执行）。 总结：请按照正确的顺序引入jQuery和Bootstrap，并确保文件路径正确。 相关问题： 1. 如何检查一个JavaScript库是否加载成功？ 2. 如何解决浏览器缓存导致的脚本未更新问题？ 3. Bootstrap 5与Bootstrap 3/4的主要区别是什么？</think>## 解决 "Uncaught ReferenceError: bootstrap is not defined" 错误 这个错误通常发生在使用 Bootstrap 时未正确加载其 JavaScript 文件或依赖项。根据引用[1][2]，以下是完整解决方案： ### 错误原因分析 1. **依赖顺序错误**：Bootstrap 的 JavaScript 需要 jQuery 作为前置依赖（引用[1]） 2. **文件未加载**：Bootstrap 的 JS 文件路径错误或未引入 3. **版本不兼容**：使用的 Bootstrap 版本与 jQuery 版本不匹配 4. **作用域问题**：Electron 等特殊环境中的配置问题（引用[3]） ### 解决方案步骤 #### 1. 确保正确的加载顺序（关键） ```html <!-- 1. 先加载 jQuery --> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <!-- 2. 再加载 Popper.js（Bootstrap 4+ 需要） --> <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js"></script> <!-- 3. 最后加载 Bootstrap JS --> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.min.js"></script> ``` #### 2. 检查文件路径是否正确 - 使用 CDN 链接确保文件可访问 - 本地文件需验证路径： ```html <!-- 本地文件示例 --> <script src="js/jquery.min.js"></script> <script src="js/bootstrap.bundle.min.js"></script> ``` #### 3. 验证文件加载状态 在浏览器开发者工具中检查： 1. 打开 **Network** 选项卡 2. 刷新页面 3. 确认 jQuery 和 Bootstrap 文件返回 **200** 状态码 4. 检查文件是否被阻止（红色警告图标） #### 4. 处理 Electron 环境问题（引用[3]） 在 Electron 的 `main.js` 中添加配置： ```javascript const mainWindow = new BrowserWindow({ webPreferences: { nodeIntegration: true, contextIsolation: false // 关键配置 } }); ``` #### 5. 版本兼容性检查 | Bootstrap 版本 | jQuery 版本要求 | Popper 要求 | |----------------|-----------------|-------------| | Bootstrap 3.x | jQuery 1.9.1+ | 不需要 | | Bootstrap 4.x | jQuery 1.9.1+ | 需要 | | Bootstrap 5.x | **不需要** | 需要 | ### 数学表达式的正确使用 在依赖加载中，正确的顺序关系可表示为： $$ \text{成功加载} = \begin{cases} 1 & \text{if } t_{\text{jQuery}} < t_{\text{Bootstrap}} \\ 0 & \text{otherwise} \end{cases} $$ 其中 $t$ 表示加载时间点。 ### 完整示例代码 ```html <!DOCTYPE html> <html> <head> <!-- Bootstrap CSS --> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet"> </head> <body> <button id="myBtn" class="btn btn-primary">Bootstrap 按钮</button> <!-- 正确的加载顺序 --> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.min.js"></script> <script> // 安全使用 Bootstrap 组件 document.getElementById('myBtn').addEventListener('click', function() { // 确保 Bootstrap 已加载 if (typeof bootstrap !== 'undefined') { // 使用 Bootstrap 方法 } else { console.error('Bootstrap 未加载!'); } }); </script> </body> </html> ``` ### 调试技巧 1. 在控制台输入 `typeof jQuery` 和 `typeof bootstrap` 验证库是否加载 2. 使用 `console.log(bootstrap)` 检查可用方法 3. 确保没有浏览器插件阻止脚本加载（引用[3]） 通过以上步骤，您可以解决 "Uncaught ReferenceError: bootstrap is not defined" 错误，并正确使用 Bootstrap 组件。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值