gatsby build showing "WebpackError: ReferenceError: document is not defined" even after adding gatsby-node.js

neeramrutia commented 3 months ago

Preliminary Checks

[X] This issue is not a duplicate. Before opening a new issue, please search existing issues: https://github.com/gatsbyjs/gatsby/issues
[X] This issue is not a question, feature request, RFC, or anything other than a bug report directly related to Gatsby. Please post those things in GitHub Discussions: https://github.com/gatsbyjs/gatsby/discussions

Description

I think there's some issue with Mantine & Gatsby when used together. command gatsby build shows this error : ` ERROR #95312 HTML.COMPILATION

"document" is not available during server-side rendering. Enable "DEV_SSR" to debug this during "gatsby develop".

See our docs page for more info on this error: https://gatsby.dev/debug-html

25 | colorSchemeManager = localStorageColorSchemeManager(), 26 | defaultColorScheme = "light",

27 | getRootElement = () => document.documentElement, | ^ 28 | cssVariablesResolver, 29 | forceColorScheme, 30 | stylesTransform

WebpackError: ReferenceError: document is not defined`

After reading the docs(https://www.gatsbyjs.com/docs/debugging-html-builds/), I added gatsby-node.js to the root of project(which I think ignores the Mantine modules) but no luck.

This is gatsby-node.js file : exports.onCreateWebpackConfig = ({ stage, loaders, actions }) => { if (stage === "build-html" || stage === "develop-html") { actions.setWebpackConfig({ module: { rules: [ { test: /bad-module/, use: loaders.null(), }, ], }, }) } }

Reproduction Link

https://github.com/neeramrutia/gatsby-youtube-video-downloader

Steps to Reproduce

1.This issue is generated when mantine is used with gatsby

Expected Result

The gatsby build should work

Actual Result

gatsby build stills showing the same error : ERROR #95312 HTML.COMPILATION

"document" is not available during server-side rendering. Enable "DEV_SSR" to debug this during "gatsby develop".

See our docs page for more info on this error: https://gatsby.dev/debug-html

25 | colorSchemeManager = localStorageColorSchemeManager(), 26 | defaultColorScheme = "light",

27 | getRootElement = () => document.documentElement, | ^ 28 | cssVariablesResolver, 29 | forceColorScheme, 30 | stylesTransform

WebpackError: ReferenceError: document is not defined

Environment

System:
    OS: Linux 6.2 Ubuntu 22.04.2 LTS 22.04.2 LTS (Jammy Jellyfish)
    CPU: (8) x64 Intel(R) Core(TM) i5-8365U CPU @ 1.60GHz
    Shell: 5.1.16 - /bin/bash
  Binaries:
    Node: 20.12.2 - /usr/bin/node
    npm: 10.5.0 - /usr/bin/npm
  Browsers:
    Chrome: 112.0.5615.165
  npmPackages:
    gatsby: ^5.13.3 => 5.13.6
    gatsby-plugin-postcss: ^6.13.1 => 6.13.1
  npmGlobalPackages:
    gatsby-cli: 5.13.3

Config Flags

DEV_SSR:true

lucklyt commented 2 months ago

i have a similar problem

nordenskiold commented 3 weeks ago

After reading the docs(https://www.gatsbyjs.com/docs/debugging-html-builds/), I added gatsby-node.js to the root of project(which I think ignores the Mantine modules) but no luck.

This is gatsby-node.js file : exports.onCreateWebpackConfig = ({ stage, loaders, actions }) => { if (stage === "build-html" || stage === "develop-html") { actions.setWebpackConfig({ module: { rules: [ { test: /bad-module/, use: loaders.null(), }, ], }, }) } }

For this to do anything you need to change /bad-module/ to a regexp that matches the module you want replaced

neeramrutia commented 3 weeks ago

After reading the docs(https://www.gatsbyjs.com/docs/debugging-html-builds/), I added gatsby-node.js to the root of project(which I think ignores the Mantine modules) but no luck. This is gatsby-node.js file : exports.onCreateWebpackConfig = ({ stage, loaders, actions }) => { if (stage === "build-html" || stage === "develop-html") { actions.setWebpackConfig({ module: { rules: [ { test: /bad-module/, use: loaders.null(), }, ], }, }) } }

For this to do anything you need to change /bad-module/ to a regexp that matches the module you want replaced

Thanks @nordenskiold exports.onCreateWebpackConfig = ({ stage, loaders, actions }) => { if (stage === "build-html" || stage === "develop-html") { actions.setWebpackConfig({ module: { rules: [ { test: /bad-module/, use: loaders.null(), }, ], }, }) } }

Adding the "bad module" solved this issue

gatsbyjs / gatsby