Rails 6 + webpack error: Uncaught TypeError: $(...).popover is not a function

user_3323040 0
Viewed 1592

I'm starting a new project in rails 6 and it's going to be my first experience with Webpack, I'm having problems using the popover, tooltip, dropdown.

application.js:37 Uncaught TypeError: $(...).dropdown is not a function

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',
        jquery: 'jquery',
        'window.jQuery': 'jquery',
        Popper: ['popper.js', 'default'],
        Rails: ['@rails/ujs']
    })
)

module.exports = environment

application.js

import 'core-js/stable'
import 'regenerator-runtime/runtime'

require("@rails/ujs").start()
require("turbolinks").start()
require("channels")

import 'bootstrap'
import './menu-left.cleanui-custom'
import './menu-right.cleanui-custom'
// Uncomment to copy all static images under ../images to the output folder and reference
// them with the image_pack_tag helper in views (e.g <%= image_pack_tag 'rails.png' %>)
// or the `imagePath` JavaScript helper below.
//
// const images = require.context('../images', true)
// const imagePath = (name) => images(name, true)

import '../stylesheets/application'


document.addEventListener("turbolinks:load", () => {
    $('[data-toggle=popover-hover]').popover({
        trigger: 'hover',
        animation: false
    });
    $("[data-toggle=tooltip]").tooltip({
        trigger: 'hover',
        animation: false
    });
});

$('.dropdown-toggle').dropdown();

Where can the mistake come from? The truth is I'm still pretty lost with webpack.

ruby-on-rails-6 popover webpack ruby-on-rails
2 Answers

This worked for me:

config/webpack/environment.js

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

const webpack = require('webpack')
environment.plugins.prepend('Provide',
  new webpack.ProvidePlugin({
    $: 'jquery/src/jquery',
    jQuery: 'jquery/src/jquery',
    Popper: ['popper.js', 'default']
  })
)
environment.config.merge(
  module.exports = {
    resolve: {
      alias: {
        jquery: 'jquery/src/jquery',
      }
    }
  }
)

module.exports = environment

app/javascript/packs/application.js

require("@rails/ujs").start()
require("turbolinks").start()
import "jquery"
import 'bootstrap'

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

Look at my code /config/webpack/environment.js file like below:

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

const webpack = require('webpack')
environment.plugins.prepend('Provide',
    new webpack.ProvidePlugin({
        $: 'jquery',
        jQuery: 'jquery',
        Popper: ['popper.js', 'default']
    })
)

module.exports = environment

And /app/javascript/packs/application.js

require("@rails/ujs").start();
require("turbolinks").start();
require("jquery");
require("bootstrap");

By setting these configurations I was able to resolve the error: Uncaught TypeError: $(…).popover is not a function

For adding bootstrap 4, jQuery and popper.js I used the command below

yarn add bootstrap jquery popper.js
user_107428760
Related