Problems installing new version

[larturi]

Hello and thanks for the new version.

Unfortunately, when uninstalling the old version and installing the new one, I am having a problem compiling my project with Gatsby.

success Writing page-data.json files to public directory - 0.010s - 7/7 705.39/s
success Building HTML renderer - 2.764s
failed Building static HTML for pages - 0.654s

 ERROR #95312 

"document" is not available during server side rendering.

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


  19637 |   var key = options.key;
  19638 |   if (key === "css") {
> 19639 |     var ssrStyles = document.querySelectorAll("style[data-emotion]:not([data-s])");
        | ^
  19640 |     Array.prototype.forEach.call(ssrStyles, function(node2) {
  19641 |       var dataEmotionAttribute = node2.getAttribute("data-emotion");
  19642 |       if (dataEmotionAttribute.indexOf(" ") === -1) {


  WebpackError: ReferenceError: document is not defined


  - index.es.js:19639 
    [gatsby-starter-default]/[react-dark-mode-toggle-2]/dist/index.es.js:19639:1
  
  - index.es.js:19978 
    [gatsby-starter-default]/[react-dark-mode-toggle-2]/dist/index.es.js:19978:1
  
  - index.es.js:20072 

https://www.gatsbyjs.com/docs/debugging-html-builds/

Greetings

[todd-elvers]

Interesting! Is it possible for you to create an example Gatsby project that exposes this bug? I'm not super familiar with Gatsby but I'd gladly try to troubleshoot this issue with you.

[larturi]

Hi Tood!

I have prepared this gatsby project which shows the error:

https://github.com/larturi/react-dark-mode-toggle-2-error

To run in development mode:
yarn install
yarn start

To replicate the error at build time:
yarn build

Error:
failed Building static HTML for pages - 0.412s

ERROR #95312

"document" is not available during server side rendering.

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

19637 | var key = options.key;
19638 | if (key === "css") {

19639 | var ssrStyles = document.querySelectorAll("style[data-emotion]:not([data-s])");
| ^
19640 | Array.prototype.forEach.call(ssrStyles, function(node2) {
19641 | var dataEmotionAttribute = node2.getAttribute("data-emotion");
19642 | if (dataEmotionAttribute.indexOf(" ") === -1) {

WebpackError: ReferenceError: document is not defined

Regards!

[dchueri]

I have the same problem with SSR on NextJS.

error - ReferenceError: document is not defined

[todd-elvers]

@larturi apologies for not getting back to you sooner, my Github notifications weren't configured correctly.

Yes this looks like the same issue that's preventing this toggle form working in SSR apps. I'm in the process of reviewing PR #6 which should correct this issue.