$(...).tooltip 不是函数 rails 6 webpack [英] $(...).tooltip is not a function rails 6 webpack

问题描述

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

I have tried changing the versions of bootstrap, jquery, and popper but no luck. I don't think I am using more than one version of jquery. Not sure where it went wrong. It would be great if someone helps me to find what I am missing.

这是我的文件列表，

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

推荐答案

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

I have resolved by adding a custom.js in the webpack folder like in the webpack configuration git document:

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;

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

Restart the server and the tooltip is working fine.

注意:application.js 中不需要添加require('jquery')、require('popper')代码>

Note: You don't need to add the require('jquery'), require('popper') in the application.js

这篇关于$(...).tooltip 不是函数 rails 6 webpack的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！