Unable to implement Materialize-CSS initialization scripts with NextJS

Question

I'm using Materialize CSS to style a web app I'm working on. Am building the app using NextJS with ReactJS. I have already styled the navbar using the classes defined in the Materialize CSS file. However, I'm unable to implement the responsive sidebar functionality using the prescribed initialization script as instructed on the Materialize website.

My Navbar component (./components/Navbar.js) looks like this:

import React, { Component, Fragment } from 'react';
import Link from 'next/link';
import $ from 'jquery';

class Navbar extends Component {
  constructor(props) {
    super(props)
    this.props = props;
  }

  componentDidMount = () => {
    document.addEventListener('DOMContentLoaded', function() {
      var elems = document.querySelectorAll('.sidenav');
      var instances = M.Sidenav.init(elems, options);
    });
  }

  render() {
    return (

      <Fragment>
        <nav>
          <div className="nav-wrapper blue">
            <Link prefetch href='/'>
              <a href="/" className="brand-logo">Project Coco</a>
            </Link>
            <a href="#" data-target="slide-out" className="sidenav-trigger"><i className="material-icons">menu</i></a>
            <ul id="nav-mobile" className="right hide-on-med-and-down">
              <li>
                <Link prefetch href='/'>
                  <a>Home</a>
                </Link>
              </li>
              <li>
                <Link prefetch href='/about'>
                  <a>About</a>
                </Link>
              </li>
              <li>
              </li>
            </ul>
          </div>
        </nav>
        {/* Sidenav markup */}
        <ul className="sidenav" id="slide-out">
          <li>
            <Link prefetch href='/'>
              <a>Home</a>
            </Link>
          </li>
          <li>
            <Link prefetch href='/about'>
              <a>About</a>
            </Link>
          </li>
        </ul>
      </Fragment>
    );
  }
}

export default Navbar;

As is obvious, this functionality (sidebar) needs JQuery. So I already have it added via yarn and am invoking it using import $ from 'jquery'. But upon running, it throws an error saying sidenav is not a function.

I even tried entirely doing away with JQuery and just going for the vanilla JS version of the initialization script in componentDidMount:

document.addEventListener('DOMContentLoaded', function() {
    var elems = document.querySelectorAll('.sidenav');
    var instances = M.Sidenav.init(elems, options);
  });

But this time, although no error, the functionality still refuses to work and clicking on the hamburger menu doesn't trigger the sidenav, which it should.

The entire code repo is up on Github for reference and the prototype app is live at schandillia.com. Any solutions?

P.S.: It seems the problem is that the initialization code in ComponentDidMount gets executed before MaterializeCSS.js (being called as an external file), on which it depends. Any work around this could be a potential solution, although that's just an assumption.

Raúl Dávila · Accepted Answer · 2018-09-06 00:25:15Z

4

+50

You need to import materialize-css into your component. Sadly, if you try to do import 'materialize-css' you'll get a window is undefined error. This is because Next.js is universal, which means it executes code first server-side where window doesn't exist. The workaround I used for this problem is the following:

Install materialize-css if you haven't:

$ npm i materialize-css

Import materialize-css into your component only if window is defined:

if (typeof window !== 'undefined') {
    window.$ = $;
    window.jQuery = $;
    require('materialize-css');
}

Then, in your componentDidMount method:

componentDidMount = () => {
    $('.sidenav').sidenav();
}

So your component looks like this:

import React, { Component, Fragment } from 'react';
import Link from 'next/link';
import $ from 'jquery';

if (typeof window !== 'undefined') {
    window.$ = $;
    window.jQuery = $;
    require('materialize-css');
}

class Navbar extends Component {
    constructor(props) {
        super(props)
        this.props = props;
    }

    componentDidMount = () => {
        $('.sidenav').sidenav();
    }

    render() {
        return (
              <Fragment>
                <nav>
                    ...
                </nav>
                {/* Sidenav markup */}
                <ul className="sidenav" id="slide-out">
                    ...
                </ul>
              </Fragment>
        );
    }
}

export default Navbar;

Sources: Next.js FAQ and this issue.

answered Sep 6, 2018 at 0:25

Raúl Dávila

2514 silver badges8 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

TheLearner Over a year ago

Thank you for an excellent solution, Raúl. Just one last question if you don't mind: If I import materialize like this in multiple components, will it increase my JS payload? I mean, will each component add an additional copy of the library to the rendered page?

Raúl Dávila Over a year ago

No, it won't. Webpack will handle that for you: "Every react component will get its own scope, and when it requires/imports another module, webpack will check if the required file was already included or not in the bundle." Hope this helps! Source: stackoverflow.com/questions/33313662/…

HoCo_ Over a year ago

Please doest it works with CSS module ? Before I go on my boilerplate

Aman Bhardwaj · Accepted Answer · 2021-08-04 10:15:29Z

0

How about this one:-

_app.tsx

import 'materialize-css/dist/css/materialize.min.css';
import '../styles/globals.css';

function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />;
}

export default MyApp;

index.tsx

import React, { useEffect } from 'react';

const Index = () => {
  useEffect(() => {
    const M = require('materialize-css');
    M.toast({ html: 'worlds' });
  }, []);

  return (
    <div className='container'>
      <h1>hello</h1>
    </div>
  );
};

export default Index;

answered Aug 4, 2021 at 10:15

Aman Bhardwaj

1,7191 gold badge10 silver badges7 bronze badges

Collectives™ on Stack Overflow

Unable to implement Materialize-CSS initialization scripts with NextJS

2 Answers 2

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related