WebPacker not loading module (metisMenu)

Question

I'm facing an issue with loading the plugin metisMenu in Webpacker/Rails 6

I keep getting the error: Uncaught TypeError: $(...).metisMenu is not a function

These are the contents from application.js:

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

import '../stylesheets/application'
import 'assets/images'

import 'bootstrap'

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

import 'metismenu'

import 'assets/javascripts/vendor.js'
import 'assets/javascripts/app.js'
import 'assets/stylesheets/icons.css'
import 'assets/stylesheets/app-creative.css'

config/webpack/environment.js:

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

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

module.exports = environment

Answer 1

All I can say is that this code works before metisMenu is fully loaded. A solution cannot be produced without seeing your configuration.