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. (C#) Handling and Raising Events

    Handling and Raising Events .NET Framework 4.5   Other Versions     6 out of 20 rated this helpful - ...

  2. Quick-Cocos2d-x Lua脚本加密打包器

    准备开新项目了,在寻找合适的框架,后来就发现了Quick-Cocos2d-x这玩意. 别说,还挺好使.之后一步步研究,发现Lua不加密是不行的. 加密的方法在这里. 因为在做版本更新的时候,一般大家都 ...

  3. selenium并行的使用

    Selenium Grid Parallel Test(C#) Author: Mars (hnynes)Email:  hnynes@gmail.comMSN:    hnynes@gmail.co ...

  4. Azure进阶攻略 | 应用流畅运行杜绝超载,自有一套好方法

    世界上很多东西,无论交通工具.房屋建筑,甚至计算机程序,在容量方面都存在设计上的理论最大值. 比如火车,正常情况下是这样的.舒适地坐着,安静地读一本书,时不时抬头若有所思地远眺车窗外风景,满满的文艺范 ...

  5. Can't connect to any repository.Read timed out after 30,000 ms

    解决方法:

  6. Centos 6.5_64bit 下安装 Zabbix server 3.0监控主机的加入

    安装Zabbix server 3.0客户端之前需要先关闭selinux和打开10050和10051端口   关闭selinux   1      vi /etc/selinux/config 2   ...

  7. Linux远程桌面(一)

    在机房折磨很久弄好的自己 Mark 一下.(测试环境rhel5.5) vnc 之独立服务配置 步骤一: (1)查看系统是否安装vnc服务(也可以在 系统-管理员-服务 里查看并勾选开机自启) # rp ...

  8. STM32开发-MDK新建工程及配置

    本人也是接触stm32没多久,之前用的MDK是5.1,现在用的是5.13,MDK5.0之前的版本(本人简称旧版)和之后的版本(本人简称新版)新建工程有很大区别.对于刚开始用学stm32的新手来说,基本 ...

  9. 单步调试理解webpack里通过require加载nodejs原生模块实现原理

    在webpack和nodejs里,我们经常使用require函数加载原生模块或者开发人员自定义的模块. 原生模块的加载,比如: const path = require("path" ...

  10. IOS Post请求(请求服务器)

    @interface HMViewController () @property (weak, nonatomic) IBOutlet UITextField *usernameField; @pro ...