CODEWITHSUNDEEP
jqueryruby-on-railswebpackmaterialize
Yves Somda
Yves Somda

Reputation: 11

materialize-css and rails 6- dropdown does not work

I always have this error: jquery.js:3428 Uncaught TypeError: $(...).dropdown is not a function

This my rails 6 code: *app/javascript/packs/application.js:

window.jQuery = $;
window.$ = $;

import Rails from "@rails/ujs"
import Turbolinks from "turbolinks"
import * as ActiveStorage from "@rails/activestorage"
import "channels"



import 'materialize-css/dist/js/materialize';
import '../stylesheets/application';
Rails.start()
Turbolinks.start()
ActiveStorage.start()

*config/webpack/environment.js:

// config/webpack/environment.js
const { environment } = require('@rails/webpacker')
const webpack = require("webpack");

// Add an additional plugin of your choosing : ProvidePlugin
environment.plugins.append(
  "Provide",
  new webpack.ProvidePlugin({
    $: "jquery",
    jQuery: "jquery",
    'Vel': 'velocity-animate',
    Popper: ["popper.js", "default"] // for Bootstrap 4
  })
);

module.exports = environment

*app/views/layouts/application.html.erb:

<!DOCTYPE html>
<html>
  <head>
    <title>Mvp4startup</title>
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <%= csrf_meta_tags %>
    <%= csp_meta_tag %>

    <%= stylesheet_pack_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
    <%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
  </head>

  <body>

    <header>
      <div class="navbar-fixed">
        <nav>
          <div class="container">
            <div class="nav-wrapper">
              <a href="#!" class="brand-logo">MVP4STARTUP</a>
              <a href="#" data-target="mobile-demo" class="sidenav-trigger"><i class="material-icons">menu</i></a>
              <ul class="right hide-on-med-and-down">
                <li><a href="#">Courses</a></li>
                <li><a href="#">Sign up</a></li>
                <li><a href="#">Login</a></li>
              </ul>
            </div>
          </nav>

          <ul class="sidenav" id="mobile-demo">
            <li><a href="sass.html">Courses</a></li>
            <li><a href="badges.html">Sign up</a></li>
            <li><a href="collapsible.html">Login</a></li>
          </ul>
        </div>
      </div>
    </header>
          
    <main>
        <%= yield %>
    </main>


    <footer class="page-footer">
      <div class="container">
        <div class="row">
          <div class="col l6 s12">
            <h5 class="white-text">MVP4STARTUP</h5>
            <p class="grey-text text-lighten-4">Bienvenue sur Azalearn la plateforme</p>
          </div>
          <div class="col l4 offset-l2 s12">
            <h5 class="white-text">Useful links</h5>
            <ul>
              <li><a class="grey-text text-lighten-3" href="#!">Facebook</a></li>
              <li><a class="grey-text text-lighten-3" href="#!">Twitter</a></li>
              <li><a class="grey-text text-lighten-3" href="#!">Instagram</a></li>
              <li><a class="grey-text text-lighten-3" href="#!">Github</a></li>
            </ul>
          </div>
        </div>
      </div>
      <div class="footer-copyright">
        <div class="container">
        © <%= Date.today().year %> Copyright MVP4STARTUP
        <a class="grey-text text-lighten-4 right" href="<%= pages_about_path %>">About us</a>
        </div>
      </div>
    </footer>    
    


  </body>

</html>

I check everywhere but no solution, and noticed that I am not the onlyone who have this issue. I have follow this tutorial to add the materialize design to my app: https://medium.com/@guilpejon/how-to-install-materialize-css-in-rails-6-0-0-beta2-using-webpack-347c03b7104e.

I really need your help to make the dropdown and the mobile sidebar work.

Upvotes: 0

Views: 433

Answers (1)

Yves Somda
Yves Somda

Reputation: 11

I found a solution, you just have to import directly materializecss by using the CDN, there is some error with the NPM and yarn version.

<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>

Upvotes: 1

Related Questions