0

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
HJW
  • 342
  • 3
  • 13
  • did you include jquery? – Crezzur Sep 05 '20 at 15:46
  • Yes, I did :`yarn add bootstrap jquery popper.js metismenu` and put the config in `environment.js` accordingly. E.g: `$('H1').html('Change H1 text')` is working ` – HJW Sep 05 '20 at 15:49
  • The error means you have not included the metis menu JS file in the HTML page correctly. We can't help further than that as you've not included that code in the question – Rory McCrossan Sep 05 '20 at 16:28
  • That' true, but I don't see where it all went wrong. I did a `yarn add metismenu` and put consequently `import 'metismenu'` in my `application.js`. If I check my `/node_modules` folder, it is present. Other JS libraries seems to be included fine. – HJW Sep 05 '20 at 16:33

1 Answers1

0

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

onokumus
  • 1
  • 2
  • Hi, thanks. I can get it to work when I load the library in from the `` section by simply doing ``. But loading it through Webpacker gives me the above error. – HJW Sep 05 '20 at 19:12