$(...).tooltip 不是一个函数 rails 6 webpack

Posted 2023-03-06

【中文标题】$(...).tooltip 不是一个函数 rails 6 webpack

【英文标题】：$(...).tooltip is not a function rails 6 webpack

【发布时间】：2020-06-13 16:34:45

【问题描述】：

我尝试过更改 bootstrap、jquery 和 popper 的版本，但没有成功。我不认为我使用了多个版本的 jquery。不知道哪里出错了。如果有人帮助我找到我所缺少的，那就太好了。

这是我的文件列表，

package.json：

  "name": "kf",
  "private": true,
  "dependencies": 
    "@fortawesome/fontawesome-free": "^5.12.1",
    "@rails/ujs": "^6.0.0",
    "@rails/webpacker": "4.2.2",
    "bootstrap": "^4.4.1",
    "jquery": "^3.4.1",
    "popper.js": "^1.16.1",
    "sweetalert2": "^9.8.2"
  ,
  "version": "0.1.0",
  "devDependencies": 
    "webpack-dev-server": "^3.10.3"
  

config/webpack/environment.js

const  environment  = require('@rails/webpacker');
const webpack = require('webpack');

environment.plugins.append(
  'Provide',
  new webpack.ProvidePlugin(
    $: 'jquery/src/jquery',
    jQuery: 'jquery/src/jquery',
    Popper: ['popper.js', 'default']
  )
);

module.exports = environment;

application.js

require('@rails/ujs').start();
require('jquery/dist/jquery');
require('popper.js/dist/umd/popper');
require('bootstrap/dist/js/bootstrap');
require('@fortawesome/fontawesome-free');
require('./owl.carousel.min');
require('./fastclick');
require('./custom-script');
require('./return-to-top');

const Swal = require('sweetalert2');
window.Swal = Swal;
const images = require.context('../images', true);
const imagePath = name => images(name, true);
import 'stylesheets/application';

jQuery(document).ready(function($) 
  $('[data-toggle="tooltip"]').tooltip();
);

警告：

jQuery.Deferred exception: $(...).tooltip is not a function TypeError: $(...).tooltip is not a function

错误：

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

【问题讨论】：

可能是 application.js 中 popper.js 缺少 require 吗？

点赞github.com/twbs/bootstrap/issues/23381#issuecomment-322179061

我已经尝试过了，但现在结果相同。 :-(

【参考方案1】：

我觉得你的 webpack 配置应该是这样的

    new webpack.ProvidePlugin(
        $: "jquery",
        jQuery: "jquery",
        Popper: ['popper.js', 'default']
    ),

如果您还有任何错误，请告诉我

【讨论】：

感谢您的建议 Tony，但我对上面的内容进行了修改，得到了 owl.carousel.min.js:6 Uncaught TypeError: Cannot read property 'fn' of undefined 的不同错误

【参考方案2】：

我已经通过在 webpack 文件夹中添加一个 custom.js 来解决，就像在 webpack 配置 git 文档中一样：

https://github.com/rails/webpacker/blob/master/docs/webpack.md#configuration

#config/webpack/custom.js

module.exports = 
  resolve: 
    alias: 
      jquery: 'jquery/src/jquery'
    
  
;

而我的 config/webpack/environment.js 改为

const  environment  = require('@rails/webpacker');
const customConfig = require('./custom');
const webpack = require('webpack');

environment.plugins.append(
  'Provide',
  new webpack.ProvidePlugin(
    $: 'jquery/src/jquery',
    jQuery: 'jquery/src/jquery',
    Popper: ['popper.js', 'default']
  )
);
environment.config.merge(customConfig);

module.exports = environment;

重新启动服务器，工具提示工作正常。

注意：application.js中不需要添加require('jquery')、require('popper')

【讨论】：

起初为我工作，但当我尝试使用模态时，我得到了$(...).modal is not a function。我通过注释/删除 webpack.ProvidePlugin() 中的 $ 和 jquery 键解决了这个问题。我不知道 webpack 的来龙去脉，但我想 jQuery 在引导之后再次被调用。无论如何，这有很大帮助。谢谢！

【参考方案3】：

根本问题是tooltip() 并非始终存在于 jQuery UI 中。它是在 1.9 版中添加的。证明：

添加的版本：1.9（来源：API.jQueryUI.com: Tooltip Widget。）

如果您没有 jQuery UI 1.9 或更高版本，您将收到错误消息：tooltip() is not a function()。

别忘了，通过升级你的 jQuery/jQuery UI 版本，你可能还会引入其他错误，例如，“Uncaught TypeError: a.indexOf is not a function”，但是这些很容易通过搜索解决方案并修复它们来修复。这是升级您使用的任何软件包的一般过程，有时会出现问题，但它们总是可以修复的。使用最新的代码是包管理的最佳盟友。