Uncaught Error: Script error for "popper.js", needed by: bootstrap 解决方案

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)

这个错误是Bootstrap依赖popper.js组件导致的。bootstrap除了依赖jQuery还是部分插件依赖popper.js。

网上找了一个解决办法。

require(["popper"], function(popper) {
    // set popper as required by Bootstrap
    window.Popper = popper;
    require(["bootstrap"], function(bootstrap) {
        // do nothing - just let Bootstrap initialise itself
    });
});

试了一下，问题还是未解决。

然后就从bootstrap中入手。

bootstrap中有前一段代码是这样的。

(function (global, factory) {
  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('popper.js'), require('jquery')) :
  typeof define === 'function' && define.amd ? define(['exports', 'popper.js', 'jquery'], factory) :
  (factory((global.bootstrap = {}),global.Popper,global.jQuery));
}(this, (function (exports,Popper,$) { 'use strict';

手动修改成requirejs中的配置，就 popper.js 改成 require paths中的popper对应的配置，我的配置是这样的，

'popper':                 'popper.js/dist/umd/popper.min',

所以，直接将 bootstrap源码中的前几行 popper.js改成popper  即可解决问题。

 

但是总认为改变源码的这种方式不太妥当。于是又找解决办法。

 

最终的解决办法是这样的。

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'

 

后来遇到，

datatables.net-bs4依赖datatables.net的解决方案也是同上。

在map中加一行配置：

'datatables.net': 'datatables'

转载于:https://my.oschina.net/justplay/blog/2992283