docz: WebpackError: ReferenceError: window is not defined

Bug Report

Describe the bug Not able to generate build. Trying to deploy documentaiton live
A clear and concise description of what the bug is.

To Reproduce

docz build

FOR BUGS: Insert debug trace
 ERROR #95312 

"window" is not available during server side rendering.

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


  21 |  // to operate correctly into non-standard environments
  22 |  // @see https://github.com/webpack-contrib/style-loader/issues/177
> 23 |  return window && document && document.all && !window.atob;
     | ^
  24 | });
  25 | 
  26 | var getTarget = function (target, parent) {


  WebpackError: ReferenceError: window is not defined
  
  - addStyles.js:23 
    node_modules/style-loader/lib/addStyles.js:23:1
  
  - addStyles.js:12 
    node_modules/style-loader/lib/addStyles.js:12:1
  
  - addStyles.js:80 ./node_modules/style-loader/lib/addStyles.js.module.exports
    node_modules/style-loader/lib/addStyles.js:80:1
  
  - buttons.scss?d045:16 Object.../src/components/Button/buttons.scss
    src/components/Button/buttons.scss?d045:16:82
  
  - index.js:1 Module.../src/components/Button/index.js
    src/components/Button/index.js:1:1
  

⠋ Building static HTML for pages
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

In order to allow us to quickly reproduce you issue please include a link to a reproduction repository.

Expected behavior sucessful build A clear and concise description of what you expected to happen…

Environment

OS: [e.g. OSX 10.13.4]
Node/npm version: [e.g. Node v10.15.3/npm 6.4.1]

About this issue

Original URL
State: closed
Created 5 years ago
Comments: 33 (12 by maintainers)

Most upvoted comments

I’m running into a similar problem. Here’s a barebones repo with instructions on how to reproduce the error. Check the gatsby-node.js file to see where I’m adding style-loader in order to compile SCSS files.

https://github.com/deammer/docz-test

deammer on Oct 1, 2019

Same error, I have 3rd party components using window, I cannot import them because of the SSR done by gatsby, I’ve tried their workaround in the documentation, nothing has worked so far.

tquiroga on Jun 2, 2020

Thank you @deammer 🙂 Try installing isomorphic-style-loader

yarn add isomorphic-style-loader --dev

And exchanging style-loader to isomorphic-style-loader in gastby-node.js:

exports.onCreateWebpackConfig = ({ actions }) => {
  const extraConfig = {
    module: {
      rules: [
        {
          test: /\.(scss)$/,
          use: ['isomorphic-style-loader', "css-loader", "sass-loader"]
        }
      ]
    }
  };

  actions.setWebpackConfig(extraConfig);
};

Not ideal but seems to work.

jesperorb on Oct 2, 2019

Good News latest version worked guys. It still has the issue but that definitely looks like on my side but build worked and dev also worked. I am closing this issue for now. If anything come up I’ll let you know guys. Thank You @rakannimer @jesperorb for this

BTARPAR on Oct 25, 2019

Hey @BTARPAR

Did you get the chance to confirm the latest rc works with your codebase ?

rakannimer on Oct 25, 2019

@BTARPAR can you please check https://github.com/BTARPAR/DOCZ/pull/1

It fixes the GraphQL error you referenced. After that the build fails because of some directories you did not include in the demo like config.

rakannimer on Oct 15, 2019

@rakannimer @jesperorb here is a repo, where I was able to reproduce the error https://github.com/BTARPAR/DOCZ

BTARPAR on Oct 14, 2019

@rakannimer sure, I’ll do that this weekend and let you know

BTARPAR on Oct 10, 2019

@jesperorb thank you for your help! I didn’t like the isomorphic-style-loader because it required extra code to work properly. Using gatsby-plugin-sass worked best.

deammer on Oct 7, 2019

I replaced all my style-loader in webpack , and gatsby-node.js but still giving me the same error. I’ve tried to node_modules may be some dependencies issues but still have same problem.

BTARPAR on Oct 2, 2019