Bootstrap 工具提示不是函数，Popper 不工作答案

【问题标题】：Bootstrap tooltip is not a function, Popper not workingBootstrap 工具提示不是函数，Popper 不工作
【发布时间】：2020-12-18 00:31:33
【问题描述】：

我正在尝试在我的网站中使用单独的引导模块，而不是包含整个缩小文件。但我吓坏了，为什么这么复杂？还是我让这件事复杂化了？

"devDependencies": {
  "exports-loader": "1.1.1",
  "webpack": "4.39.2",
  "uglify-js": "3.6.0",
},
"dependencies": {
  "bootstrap": "4.3.1",
  "jquery": "3.4.1",
  "popper.js": "1.14.7",
 }

/js 中的自定义 bootstrap.js

/* Tries:
import $ from 'jquery';
import 'popper.js';
import 'popper.js/dist/umd/popper.js';
import 'popper.js/dist/umd/popper.min.js';
import 'bootstrap/dist/js/bootstrap.min.js'; */

window.jQuery = $;
window.$ = $;
global.$ = $;


/* BOOTSTRAP CUSTOM IMPORTS */
import 'bootstrap/js/dist/util';
import 'bootstrap/js/dist/alert';
import 'bootstrap/js/dist/button';
import 'bootstrap/js/dist/collapse';
import 'bootstrap/js/dist/dropdown';
import 'bootstrap/js/dist/modal';
import 'bootstrap/js/dist/tooltip';
import 'bootstrap/js/dist/popover';
import 'bootstrap/js/dist/tab';

这样，我的代码编译成功，但在 chrome 控制台上出现此错误

Uncaught TypeError: $(...).tooltip is not a function

如果我将它包含在我的 webpack.config.js 中：

new webpack.ProvidePlugin({
  $: 'jquery/src/jquery',
  jQuery: 'jquery/src/jquery',
  'window.jQuery': 'jquery/src/jquery',
  Popper: ['popper.js', 'default'],
}),

工具提示错误消失了，但在其他库上开始出错，例如：

//Error on chrome console
Uncaught TypeError: $(...).mask is not a function

我的JS加载顺序是：

LIBS (A WEBPACK MERGED FILE WITH ALL OTHER LIBS, LIKE JQUERY, MASKS, SLICK...)
BOOTSTRAP
POLYFILL

在互联网上搜索我发现很多人都遇到了这个问题，但他们提出的解决方案对我不起作用。

拜托，有人可以帮帮我吗？

【问题讨论】：

你有没有为你的掩码错误尝试过这个stackoverflow.com/questions/28512909/…
重新检查你的导入，先jQuery，然后是Popper.js，然后是Bootstrap JS，文档准备好后调用tooltip函数
@HemantMalik 谢谢，但它没有解决，因为它不是掩码错误。仅当我从 node_modules 更改引导加载程序而不是直接包含缩小版本时才会发生这种情况
@AvishkaDambawinna 我已经完成了。我什至将命令附加到问题中。在某种程度上，这解决了。谢谢！

标签： javascript webpack bootstrap-4

【解决方案1】：

感谢您的回复。

我知道发生了什么，但不是很明白为什么，但是，使用 JQuery 的引导导入会导致插件在使用 jquery 时发生冲突，因此，我必须删除从引导文件导入的 jquery，然后在另一个进程中手动包含插件文件，像这样：

/* BOOTSTRAP.js CUSTOM IMPORTS */
//removed jquery imports
import 'bootstrap/js/dist/util';
import 'bootstrap/js/dist/alert';
import 'bootstrap/js/dist/button';
...

webpack.config：

    //I had to maintain that provider
    new webpack.ProvidePlugin({
      $: "jquery",
      jQuery: "jquery",
      Popper: ['popper.js', 'default'],
    }),
    new MergeIntoSingleFilePlugin({
      files: {
        "js/libs.base.js": [
          //included jquery min file on merge of plugins
          path.join(source, 'src/libs/jquery', 'jquery-3.4.1.min.js'),
          path.join(source, 'src/libs/jquery-mask', 'jquery.mask.min.js'),
          ...

【讨论】：

【解决方案2】：

我认为这会有所帮助。

  // TOOLTIP PLUGIN DEFINITION
  // =========================

  var old = $.fn.tooltip

  $.fn.tooltip = function (option) {
    return this.each(function () {
      var $this   = $(this)
      var data    = $this.data('bs.tooltip')
      var options = typeof option == 'object' && option
      if (!data) $this.data('bs.tooltip', (data = new Tooltip(this, options)))
      if (typeof option == 'string') data[option]()
    })

【讨论】：

感谢@Samlinuxgeek，它没有解决，因为 $.fn.tooltip 未定义。我已经弄清楚发生了什么，是一个 webpack 配置。
啊好吧！我很高兴它解决了！ -山姆（13）