CODEWITHSUNDEEP
jqueryruby-on-railsrubygems
Praveen RL
Praveen RL

Reputation: 698

Materialize jQuery is not working in Rails 6

I'm getting error while adding materialize-sass jquery functions in Rails version6

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

//= require jquery
//= require materialize

$(document).on('turbolinks:load', function () {
    $('.sidenav').sidenav();
});

Error:

application.js:10 Uncaught TypeError: $(...).sidenav is not a function
    at HTMLDocument.<anonymous> (application.js:10)
    at HTMLDocument.dispatch (jquery.js:4535)
    at HTMLDocument.elemData.handle (jquery.js:4355)
    at Object../node_modules/turbolinks/dist/turbolinks.js.e.dispatch (turbolinks.js:75)
    at r.notifyApplicationAfterPageLoad (turbolinks.js:994)
    at r.pageLoaded (turbolinks.js:948)
    at turbolinks.js:872

Upvotes: 0

Views: 437

Answers (1)

Amit Patel
Amit Patel

Reputation: 15985

You are mixing up sprokets with webpacker

Remove following lines which are syntax of sprokets from the webpacker entry point application.js

//= require jquery
//= require materialize

Assuming you have installed materialize using yarn install alread, add following line in place of above lines

import 'materialize-css/dist/js/materialize'

You will also need styles as well. For that create app/javascript/stylesheets/application.scss file and place following line in it

@import 'materialize-css/dist/css/materialize';

now import this scss file in your application.js using

import '../stylesheets/application'

Upvotes: 1

Related Questions