WebpackError: ReferenceError: window is not defined when trying to use darkreader api for dark mode on my website.

[rsapkf]

I'm trying to implement darkreader's dark mode by default on my gatsby site but the build fails with "window is not defined" error. I tried almost everything from https://www.gatsbyjs.org/docs/debugging-html-builds/ and gatsbyjs/gatsby#309 but still no luck.

[alexanderby]

Unfortunately I don't know how the Gatsby works. Dark Reader script should run in browser, but not in Node.js environment.

[Gusted]

Use it as a NPM package.

[ShahriarKh]

I'm using Next.js and have the same problem :/
I installed the npm package, and also tried importing modules in index.js, _app.js, _document.js, my-component.js but no luck.

[Gusted]

Open up a new issue.

[jayasio]

@ShahriarKh +others looking for this, this is not a bug in darkreader.

In Next.js you should import client side libraries with "dynamic import"
https://nextjs.org/docs/advanced-features/dynamic-import
https://stackoverflow.com/questions/52939439/dynamic-import-node-module-with-next-js

This might be something similar in Gatsby.
https://www.gatsbyjs.com/docs/using-client-side-only-packages/

[Jeidnx]

For all persons looking at this: There is no good solution.

It is correct that this is not a bug in darkreader, however darkreader are the only ones who can properly fix it by not throwing an error if no window is present.

Dynamically importing Libraries in NextJS is not supported and doesn't work (anymore?).
vercel/next.js#13417 (comment)

In the meantime I have a solution that is working for me:

const [DarkReader, setDarkReader] = useState({});

useEffect(() => {
    import("darkreader").then((lib) => {
        setDarkReader(lib)
    })
}, [])

// Remember to check if library has loaded
if(typeof DarkReader.isEnabled === 'undefined'){
    return(<h1>Loading...</h1>)
}

[ShahriarKh]

This is how I managed to fix it in Next.js:

const darkReaderOptions = { brightness: 100, contrast: 96, sepia: 0 };

export async function toggleDarkMode() {
   if (typeof window != "undefined") {
      const { isEnabled, enable, disable, setFetchMethod } = await import("darkreader");
      setFetchMethod(window.fetch);
      const isOn = isEnabled();
      isOn ? disable() : enable(darkReaderOptions);
   }
}

<button onClick={toggleDarkMode} />