【前端异常】解决前端引入Bootstrap的dropdowns 菜单时报错,Uncaught TypeError: Bootstrap‘s dropdowns require Popper.js

简介: 【前端异常】解决前端引入Bootstrap的dropdowns 菜单时报错,Uncaught TypeError: Bootstrap‘s dropdowns require Popper.js

1、问题描述

在做网站时,引用了Bootstrap的下拉菜单,测试代码的时候遇到了下拉菜单无法显示的问题,我使用bootstrap的dropdown部件,打开网页后点击dropdown,报了如下错误:Uncaught TypeError:Bootstrap dropdown require Popper.js

2、示例代码

前端代码如下:

<li class="nav-list-link" id="china-english">
  <div class="btn-group">
    <button class="btn btn-link btn-sm dropdown-toggle" type="button" 
      data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      <img src="/www/xgwy/images/navbar/chinese_flag.png" alt="中文图标">中文
      <span class="glyphicon glyphicon-menu-down" aria-hidden="true"></span>
    </button>
    <div class="dropdown-menu">
      <a class="dropdown-item" href="/en/web/">
        <img src="/www/xgwy/images/navbar/english_flag.png" alt="英文图标">English
      </a>
      <div class="dropdown-divider"></div>
      <a class="dropdown-item" href="/cn/web/">
        <img src="/www/xgwy/images/navbar/chinese_flag.png" alt="中文图标">中文
      </a>
    </div>
  </div>
</li>

3、解决方案

看错误提示,是要导入Popper.js文件,我总结了两种方法:(都需要注意引入顺序问题:popper.js必须在bootstrap.js之前引用进来

方案1:直接引用popper.js

就是直接引用别人的popper.js库,如下:

<script src="https://cdn.bootcss.com/popper.js/1.14.7/umd/popper.min.js"></script>

方案2:npm安装

在直接工程目录下使用npm安装:npm install --save popper.js

安装好后,我们可以在目录下找到node_modules文件夹,然后将popper.js文件引入html()。

保存好刷新网页再试了一下,发现还是不行,仍报了刚才的错误。于是我检查了一下node_modules->dist文件夹下的popper.js文件,发现有3个这样的文件(esm和umd文件夹下也各有一个popper.js文件)。再于是我把它们分别引入后再操作一下dropdown部件,最后在引入umd文件下的popper.js后,终于是搞定。虽然不知道为啥会这样,但也算是成功解决了问题。

目前只发现在umd文件夹下的popper.js才可以用,至于为什么,还在后续深入学习中ing。

注:popper.js必须在bootstrap.js之前引用进来,否则也是报错的

 

 

完结!


相关文章
|
6月前
|
前端开发 数据安全/隐私保护
Uncaught (in promise) Error: Request failed with status code 404 at createError (createError.js:
Uncaught (in promise) Error: Request failed with status code 404 at createError (createError.js:
244 2
|
4月前
Crypto-JS——Uncaught Error: Malformed UTF-8 data
Crypto-JS——Uncaught Error: Malformed UTF-8 data
238 0
|
前端开发
【前端异常】解决前端引入Bootstrap的dropdowns 菜单时报错,Uncaught TypeError: Bootstrap‘s dropdowns require Popper.js
【前端异常】解决前端引入Bootstrap的dropdowns 菜单时报错,Uncaught TypeError: Bootstrap‘s dropdowns require Popper.js
120 0
|
JavaScript
vue路由跳转报错Uncaught SyntaxError:Unexpected token ‘<‘ (at chunk-elementUI.aeed1b74.js:1:1)Uncaught Synt
vue路由跳转报错Uncaught SyntaxError:Unexpected token ‘<‘ (at chunk-elementUI.aeed1b74.js:1:1)Uncaught Synt
814 0
|
JavaScript
js代码Uncaught TypeError: Cannot set properties of null (setting ‘innerHTML‘)问题解决
js代码Uncaught TypeError: Cannot set properties of null (setting ‘innerHTML‘)问题解决
1534 0
js代码Uncaught TypeError: Cannot set properties of null (setting ‘innerHTML‘)问题解决
|
JavaScript 前端开发
Uncaught ReferenceError错误详解(js函数参数使用错误)
在js中插入html调用函数的的时候出现了Uncaught ReferenceError格式错误,打开浏览器调试发现错在书写的格式上面。?
377 0
Uncaught ReferenceError错误详解(js函数参数使用错误)
|
JavaScript
Vue:Uncaught TypeError Object(...) is not a function at resetStoreState (vuex.esm-browser.js55021
Vue:Uncaught TypeError Object(...) is not a function at resetStoreState (vuex.esm-browser.js55021
508 0
Vue:Uncaught TypeError Object(...) is not a function at resetStoreState (vuex.esm-browser.js55021
|
JSON 定位技术 开发工具
解决echarts地图geoJson报错问题(“echarts.min.js:45 Uncaught Error: Invalid geoJson format Cannot read prope”)
解决报错: 1.Invalid geoJson format Cannot read property ‘length’ of undefined 2 echarts.min.js:45 Uncaught Error: Invalid geoJson format Cannot read prope
1367 0
解决echarts地图geoJson报错问题(“echarts.min.js:45 Uncaught Error: Invalid geoJson format Cannot read prope”)
|
Web App开发 JavaScript
Chrome浏览器调试js第二次运行出现Uncaught SyntaxError: Identifier ‘***’ has already been declared
Chrome浏览器调试js第二次运行出现Uncaught SyntaxError: Identifier ‘***’ has already been declared
1339 0
Chrome浏览器调试js第二次运行出现Uncaught SyntaxError: Identifier ‘***’ has already been declared
|
JavaScript 数据安全/隐私保护 安全
【shiro】使用shiro搭建的项目,页面引用js,报错:Uncaught SyntaxError: Unexpected token <
使用shiro搭建项目过程中,总是出现登录页面 登录第一次有效果,登陆第二次出现302状态码,第三次又有效果,第四次又没有效果的局面。 因此,采用ajax提交页面登录的用户名和密码,但是在引用js的过程中,明明js的地址和引用路径正确,却总是报错如下: Uncaught SyntaxError: U...
1639 0