Ошибка при использовании Bootstrap 4 с Rails 6 Webpacker - PullRequest
Новая
       20

Ошибка при использовании Bootstrap 4 с Rails 6 Webpacker

0 голосов
/ 28 сентября 2019

У меня очень простое приложение на Rails 6 с jquery, настроенным следующим образом:

config / webpack / environment.js: 

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

const webpack = require('webpack');

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

module.exports = environment;

Я пытаюсь использовать Bootstrap.Однако я не могу использовать какой-либо метод Bootstrap JS с селектором JQuery.

Пример: 

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

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

Любая помощь будет принята с благодарностью!Спасибо

Решение

config / webpack / environment.js: 

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

const webpack = require('webpack');

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

module.exports = environment;

1 Ответ

1 голос
/ 28 сентября 2019

(1)

Вы используете turbolinks, поэтому вместо document:ready вам следует полагаться на turbolinks:load событие 

document.addEventListener("turbolinks:load", () => {
  $("[data-toggle='tooltip']").tooltip()
})

(2)

Не используйте минимизированные библиотеки JavaScript 

// application.js
import "bootstrap"

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