Uncaught Error: Script error for "popper.js", needed by: bootstrap
https://requirejs.org/docs/errors.html#scripterror
at makeError (require.js:168)
at HTMLScriptElement.onScriptError (require.js:1738)

  

使用require.js 模块化开发引入bootstrap 4.1.1 时会报错,如上,在网上找到一个解决办法,在配置require.js 时添加map参数,最终解决方案如下:

require.config({
baseUrl: '/vendors',
paths: {
'jquery': 'jquery/dist/jquery.min',
'bootstrap': 'bootstrap/dist/js/bootstrap',
'popper': 'popper.js/dist/umd/popper.min',
...
},
shim: {
'bootstrap': ['jquery']
},
map: {
'*': {
'popper.js': 'popper'
}
}
});

  

核心解决方案是:

在require的配置中 map 里加配置 'popper.js': 'popper'。

这是因为在Bootstrap里定义的是require('popper.js'), 而不是require标准的require('popper'), 所以要在map里做一个转换以让require.js识别。

以后遇到同类情况也可以用些方案解决。

参考:https://my.oschina.net/justplay/blog/2992283

Uncaught Error: Script error for "popper.js", needed by: bootstrap - require.js的更多相关文章

  1. [转]js模块化——AMD及require.js

    由CommonJS组织提出了许多新的JavaScript架构方案和标准,希望能为前端开发提供统一的指引.AMD规范就是其中比较著名一个,全称是Asynchronous Module Definitio ...

  2. 分页器的js实现代码 bootstrap Paginator.js

    参考: http://www.jb51.net/article/76093.htm 如前所述, 不要什么都想到 jquery的 脚本js, 应该首先推荐的是 css 和 元素本身的事件 函数 如: o ...

  3. js模块化开发——require.js的用法详细介绍(含jsonp)

    RequireJS的目标是鼓励代码的模块化,它使用了不同于传统<script>标签脚本加载步骤.可以用它回事.优化代码,但其主要的目的还是为了代码的模块化.它鼓励在使用脚本以moudle ...

  4. Karma +Jasmine+ require JS进行单元测试并生成测试报告、代码覆盖率报告

    1. 关于Karma Karma是一个基于Node.js的JavaScript测试执行过程管理工具(Test Runner). 该工具可用于测试所有主流Web浏览器,也可集成到CI(Continuou ...

  5. require.js实践

    ASP.NET MVC应用require.js实践 这里有更好的阅读体验和及时的更新:http://pchou.info/javascript/asp.net/2013/11/10/527f6ec41 ...

  6. js模块化开发——require.js学习总结

    1.为什么使用require.js 作为命名空间: 作为命名空间使用: 异步加载js,避免阻塞,提高性能: js通过require加载,不必写很多script 2.require.js的加载 requ ...

  7. require.js详解

    一:什么是require.js ①:require.js是一个js脚本加载器,它遵循AMD(Asynchronous Module Definition)规范,实现js脚本的异步加载,不阻塞页面的渲染 ...

  8. javascript模块化编程库require.js的用法

    随着javascript的兴起,越来越多的公司开始将JS模块化,以增加开发的效率和减少重复编写代码的.更是为了能更加容易的维护日后的代码,因为现在的随着人们对交互效果的越来越强烈的需求,我们的JS代码 ...

  9. require.js使用教程

    require.js使用教程 下载require.js, 并引入 官网: http://www.requirejs.cn/ github : https://github.com/requirejs/ ...

随机推荐

  1. [转] asp.net core Introducing View Components

    本文转自:http://www.c-sharpcorner.com/uploadfile/8c19e8/asp-net-5-getting-started-with-asp-net-mvc-6/ In ...

  2. 错误提示”void is an invalid type for the variable“

    今晚做android作业,出现错误提示:void is an invalid type for the variable, invalid:无效的  variable:变量,在网上找了一下后知道是 方 ...

  3. 显卡(GPU)的基础知识

    显卡的性能指标有: 流处理器(SP)数量 核心频率 流处理器的架构 显存容量 显存频率 显存带宽 1. 流处理器的数量 把一个GPU当成是一个画画的工厂,其中流处理器的数量就是画师的数量,其数量自然是 ...

  4. webapi 开启跨域支持

    1.Global文件: GlobalConfiguration.Configuration.EnableCors(); 2.需要跨域的action或controller添加跨域规则 [EnableCo ...

  5. iOS实现头像选取(照相或者图片库)、大小等比缩放、生成圆形头像

    //弹出actionsheet.选择获取头像的方式 //从相册获取图片 -(void)takePictureClick:(UIButton *)sender { // /*注:使用,需要实现以下协议: ...

  6. 洛谷 P1195 口袋的天空(最小生成树)

    嗯... 题目链接:https://www.luogu.org/problemnew/show/P1195 思路: 首先可以判断这道题是用最小生成树来做的,然后在将其合并时用ans记录一下它的总消耗, ...

  7. ArcGisJS的layers-add-result事件总结

    map.on("layers-add-result", initEditing);当地图控件中的所有图层加载完毕之后触发. 注意图层加载完成后返回的的结果:event. funct ...

  8. day004-Map类

    1.Map集合概述 Map是一个接口,只要是实现了该接口的类就是一个双列集合. 双列集合就是每次存储元素时需要存储两个元素的集合. 这两个元素称为键值对, Key Value ==>映射关系 特 ...

  9. 使用坚果云+keepass实现网盘密码管理

    准备工作 登录坚果云web版 在主页创建了一个新的同步文件夹AAA(与同步文件夹My Nutstore并列) 设置同步文件夹AAA:勾选“默认不同步到电脑” 把KeePass的数据库文件db.kdbx ...

  10. 【转】批处理命令 For循环命令详解!

    批处理for命令详解FOR这条命令基本上都被用来处理文本,但还有其他一些好用的功能!看看他的基本格式(这里我引用的是批处理中的格式,直接在命令行只需要一个%号)FOR 参数 %%变量名 IN (相关文 ...