Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

WebpackError: window is not defined

See original GitHub issue

When trying to use materialize with GatsbyJS and deploying to Netlify I get the following error when building the project: WebpackError: window is not defined

1:04:37 PM:   WebpackError: window is not defined
1:04:37 PM:   
1:04:37 PM:   - materialize.min.js:6 Object.module.exports.layoutContext
1:04:37 PM:     ~/materialize-css/dist/js/materialize.min.js:6:1135
1:04:37 PM:   
1:04:37 PM:   - index.js:6 Object.exports.__esModule
1:04:37 PM:     src/layouts/index.js:6:1
1:04:37 PM:   
1:04:37 PM:   - index.js:3 Object.exports.__esModule
1:04:37 PM:     .cache/layouts/index.js:3:3
1:04:37 PM:   
1:04:37 PM:   - sync-requires.js:6 Object.exports.__esModule
1:04:37 PM:     .cache/sync-requires.js:6:35
1:04:37 PM:   
1:04:37 PM:   - static-entry.js:8 Object.<anonymous>
1:04:37 PM:     .cache/static-entry.js:8:1

The sample project is here: https://github.com/vojtechruz/staticman-example

The failed build log here: https://app.netlify.com/sites/staticman-example/deploys/5b81377f4ed62f240de8d134

Issue Analytics

State:
Created 5 years ago
Comments:9 (2 by maintainers)

Top GitHub Comments

1reaction

hug0bcommented, Sep 29, 2018

The only issue with gatsby js v2 it that I haven’t figured out how to make the waves effect work in production builds.

0reactions

ahummel25commented, Oct 4, 2020

Did anyone figure out a workaround for this? I’m also trying to import materialize-css (trying to use waves specifically) into my Gatsby app. Not having any luck. Tried importing it inside a useEffect but that doesn’t appear to work. Which seems weird because this works for scrollspy:

useEffect(() => {
    if (typeof window !== 'undefined') {
      import('materialize-css').then((M) => {
        const scrollSpyElems = document.querySelectorAll('.scrollspy');
        M.ScrollSpy.init(scrollSpyElems);
      });
    }
 }, []);

But for whatever reason, I cannot get waves to work using this same import.

Update:

Got waves to work by adding this inside the above import.then:

const wavesElems = document.querySelectorAll('.waves-effect');

const Waves = window.Waves;

wavesElems.forEach((wavesElem): void => {
     Waves.attach(wavesElem);
});