Gatsby: Window is not defined

Yeah, during development, react components are only run in the browser where window is defined. When building, Gatsby renders these components on the server where window is not defined. Generally with React the solution to this is only access window in componentDidMount or to check that window exists before accessing it. For third party libraries that don't do this, what you've done looks great.

@KyleAMathews I can't seem to get componentDidMount to fire in html.js or _template.jsx using gatsby develop, maybe it's not supposed to, or I'm doing something wrong?

@hitchcott can you share a bit more about your build? I just installed semantic-ui into a gatsby project but my CSS isn't working. Not sure how to get the CSS loaded in my page. React is suppose the in-line styles right, but how does it know about them? Also I suppose I should configure webpack to do the LESS build instead of gulp. Did you just install the webpack-lessloader?

@Maxhodges — It’s Webpack, not React, that “knows” about your styles. Webpack knows because you import or require the compiled file(s) somewhere in the JS files that get bundled.

For example, I import my main styles.css in the _template.js file, so when Webpack builds the bundle, it includes those styles – inline when in development mode; external referenced file when in production (look at cssLink here for an example).

There’s no need for an additional LESS loader, as Gatsby already includes one in its default Webpack config.

for those of you that followed the directions on the Gatsby GitHub page for installing the docs-site...
import { colors } from 'utils/colors'
is the trouble maker and after commenting out this and ${colors.bg} the site developed nicely.

Would it be possible to show a better error message when this happens? I have no idea where to find the error.

Failed at generating HTML

/home/projects/snipsonian/node_modules/gatsby/dist/bin/cli.js:42
      throw err;
      ^
Error: ReferenceError: window is not defined
    at Object.defineProperty.value (render-page.js:44529:79)
    at __webpack_require__ (render-page.js:30:30)
    at Object.exports.__esModule (render-page.js:42560:24)
    at __webpack_require__ (render-page.js:30:30)
    at Object.defineProperty.value (render-page.js:42533:51)
    at __webpack_require__ (render-page.js:30:30)
    at Object.<anonymous> (render-page.js:80:19)
    at __webpack_require__ (render-page.js:30:30)
    at Object.assign.i (render-page.js:50:18)
    at render-page.js:53:10
error Command failed with exit code 1.

That's a really good idea! Currently pressing hard on 1.0 so won't get this
soon but for now, just open up public/render-page.js to the the line number
indicated there (44529) and see what code is causing trouble.

On Wed, May 17, 2017 at 11:45 AM Thomas Seberechts notifications@github.com
wrote:

Would it be possible to show a better error message when this happens? I
have no idea where to find the error.

Failed at generating HTML

/home/projects/snipsonian/node_modules/gatsby/dist/bin/cli.js:42
throw err;
^
Error: ReferenceError: window is not defined
at Object.defineProperty.value (render-page.js:44529:79)
at __webpack_require__ (render-page.js:30:30)
at Object.exports.__esModule (render-page.js:42560:24)
at __webpack_require__ (render-page.js:30:30)
at Object.defineProperty.value (render-page.js:42533:51)
at __webpack_require__ (render-page.js:30:30)
at Object. (render-page.js:80:19)
at __webpack_require__ (render-page.js:30:30)
at Object.assign.i (render-page.js:50:18)
at render-page.js:53:10
error Command failed with exit code 1.

—
You are receiving this because you were mentioned.

Reply to this email directly, view it on GitHub
https://github.com/gatsbyjs/gatsby/issues/309#issuecomment-302041105,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AAEVh6E9bZyyi0iX-Q7Q92VTvEb1DZbmks5r6sHGgaJpZM4Isiea
.

That worked! Thx.

Tip: put typeof window !== 'undefined' && window.whaterver-you-need to solve this.

the error is disappeared when using componetDidMount

I have a similar issue, but I am using localStorage to persist some of my redux state on the browser. How do I bypass this issue if I cannot use window.localStorage in the store.js file?

😢

Thanks!

@gregorskii

const windowGlobal = typeof window !== 'undefined' && window

then, windowGlobal.localStorage

Ya this worked, but I had to mock local storage using https://www.npmjs.com/package/localstorage-memory:

const windowGlobal = typeof window !== 'undefined' && window;
const localAdapter = windowGlobal ?
  adapter(windowGlobal.localStorage) :
  adapter(memoryStorage)
;

Using https://www.npmjs.com/package/redux-localstorage.

only access window in componentDidMount

Gist for third party js.

// index.js
import React from "react";
import Link from "gatsby-link";

// import "uikit/dist/js/uikit";
// Third party JS access `window` without
// `typeof window !== "undefined"` check

class Template extends React.Component {
  componentDidMount() {
    import("uikit/dist/js/uikit")
      .then((uikit) => {
        this.uikit = uikit;
      })
      .catch((error) => console.error(error));
  }
  render() {
    // ...
  }
}

// ...

@CallMeLaNN suggestion worked for me. With UIkit, I get:

WebpackError: Element is not defined

Putting the imports inside componentDidMount worked.

 componentDidMount() {
    try {
      this.UIkit = require("uikit/dist/js/uikit");
      this.Icons = require("uikit/dist/js/uikit-icons");
      this.UIkit.use(this.Icons);
    } catch (e) {
      console.error(e);
    }
  }

Yeah, during development, react components are only run in the browser where window is defined. When building, Gatsby renders these components on the server where window is not defined. Generally with React the solution to this is only access window in componentDidMount or to check that window exists before accessing it. For third party libraries that don't do this, what you've done looks great.

It would be super helpful to surface this early / prominently. I'm trying to build for the first time, and there are many issues I have to fix now, since I was unaware that this would become an issue. It's particularly stressful as I urgently need to deploy this; I'm submitting a proposal for something, and I need the site to be online.

I'm only looking to deploy to Github Pages (for now, at least), and so I don't need SSR. Is there a way to just build for clients?

It seems like with Gatsby v2, you need to choose between es6 and commonjs imports, you won’t be able to mix them up anymore for reasons having to do with webpack 4.

That being the case, and assuming you’re already using es6 imports, it would seem like @jfaeldon’s solution is the one to use here and @hitchcott’s won’t work anymore.

Can someone confirm that?

@joshwcomeau completely agree with you, also I don't think is a good idea to run dev in browser only and build in node.js. The difference is so big, and as in DEV and PROD environment you want to make the environments as similar as possible, I think gatsby should do the same, run both dev and build in an environment that is as similar as possible.

so Can I make it run build in browser ? I don't need SSR.

Hi,
I am experiencing the same issue here, Coverflow works fine for gatsby develop but for build it throws an error:
WebpackError: window is not defined

     - react-coverflow.js:1 Object.<anonymous>
       ~/react-coverflow/dist/react-coverflow.js:1:330

     - main.js:1 Object.<anonymous>
       ~/react-coverflow/main.js:1:1

import Coverflow from 'react-coverflow';
import { StyleRoot } from 'radium'

class Team extends React.Component {

render(){
return(

displayQuantityOfSide={2}
navigation
infiniteScroll
enableHeading
active={0}
media={{
'@media (max-width: 720px)': {
width: '100%',
height: '200px'
},
'@media (min-width: 720px)': {
width: '100%',
height: '400px',
}
}}
>

  </Coverflow>
</StyleRoot>
)

}
}

export default Team;

I got this error after installing a couple of packages, so it must be in one of those - but I can't find where the problem is. Anyone have tips on how to better figure out which npm package it might be? The error is frustratingly generic.

maybe the react implementation is better?
https://react.semantic-ui.com/ and https://github.com/pretzelhands/gatsby-starter-semantic-ui

@wmlutz the most simple explanation i can offer is, it's because when you issue gatsby develop to build the project you're working on in development, or gatsby build && gatsby serve for a production build, internally Gatsby will generate the pages and the css, links and so on. But one thing to keep in mind is that this is done on the server side, on node side, not on the client side. So node doesn't have access to those specific apis, as they're for client use only. And with that some packages won't play nice with Gatsby out of the box. Some changes might be required to get them to "play nice"

@jonniebigodes - Thanks for that. I think I understand the _why_ now. My thing is now the _what_. I stupidly did a ton of work and am having trouble isolating which package is causing the problem. There's no way to gatsby build with some more detailed error reporting?

@jonniebigodes - I figured out the package causing the problem: react toasts. My next problem is figuring out how to fix it.

_handleSubmit = async (e) => {
    e.preventDefault();
    let {email} = this.state;

    const response = await addToMailchimp(email)
    if (response.result === "success") {
      ToastsStore.success("Successfully joined the list")
    }
    if (response.result === "error") {
      ToastsStore.error("There was an error: " + result.msg)
    }
  }

@wmlutz something like the below code block. react is loaded after the initial static bundle is received. So by the time the user reaches _handleSubmit window will exist.

Please note if react toasts calls window on import then you might still experience the error.

_handleSubmit = async (e) => {
    e.preventDefault();
    let {email} = this.state;

    const response = await addToMailchimp(email)
    if (response.result === "success") {
      if (window) ToastsStore.success("Successfully joined the list")
    }
    if (response.result === "error") {
      if (window) ToastsStore.error("There was an error: " + result.msg)
    }
  }

Same issue. I'll find another Toast library or do my own. Shouldn't kill me.

@joserocha3 that piece of code will only work on development mode. When a call to a production build is issued, that will fail during the error Building static HTML failed stage. As Gatsby will introspect the imports and with that look for the package in question it will fail because this one is using some apis not native to node.js and @wmlutz the code for that package is pretty straightforward and shouldn't take too much trouble to adjust to your case. Why not fork the repo, check the code and create a set of components that will work for you?

I agree with @jonniebigodes about forking. The repo source is only a few files. The offending call is a document reference in ToastsContainer.tsx.

Or try https://github.com/gatsbyjs/gatsby/issues/309#issuecomment-387039877 mentioned above.

The cause is how strict mode, UMD and bundling work.

Forking is not needed if you use patch-package.

Also see https://github.com/webpack/webpack/issues/6677 and the linked issues.

It depends on the code tgat you use and if they do the proper checks or use the umd target at all and define the global objscts.

Hello folks still getting the same problem i didn't use any window function in my project but still it's throwing the same error why i having this one.. ?

1:09:03 AM: Build ready to start
11:09:05 AM: build-image version: 9e0f207a27642d0115b1ca97cd5e8cebbe492f63
11:09:05 AM: build-image tag: v3.3.2
11:09:05 AM: buildbot version: 75cd99f62ada9e21edea53208e8baf0eab85a045
11:09:06 AM: Fetching cached dependencies
11:09:06 AM: Starting to download cache of 194.6MB
11:09:07 AM: Finished downloading cache in 1.636969993s
11:09:07 AM: Starting to extract cache
11:09:17 AM: Finished extracting cache in 9.693656527s
11:09:17 AM: Finished fetching cache in 11.478174001s
11:09:17 AM: Starting to prepare the repo for build
11:09:17 AM: Preparing Git Reference pull/21/head
11:09:18 AM: Found netlify.toml. Overriding site configuration
11:09:18 AM: Starting build script
11:09:18 AM: Installing dependencies
11:09:19 AM: Started restoring cached node version
11:09:22 AM: Finished restoring cached node version
11:09:23 AM: v10.16.0 is already installed.
11:09:24 AM: Now using node v10.16.0 (npm v6.9.0)
11:09:25 AM: Attempting ruby version 2.6.2, read from environment
11:09:27 AM: Using ruby version 2.6.2
11:09:27 AM: Using PHP version 5.6
11:09:27 AM: Started restoring cached node modules
11:09:27 AM: Finished restoring cached node modules
11:09:27 AM: Started restoring cached yarn cache
11:09:27 AM: Finished restoring cached yarn cache
11:09:28 AM: Installing NPM modules using Yarn version 1.9.4
11:09:29 AM: yarn install v1.9.4
11:09:29 AM: warning package.json: No license field
11:09:29 AM: warning package-lock.json found. Your project contains lock files generated by tools other than Yarn. It is advised not to mix package managers in order to avoid resolution inconsistencies caused by unsynchronized lock files. To clear this warning, remove package-lock.json.
11:09:29 AM: warning [email protected]: No license field
11:09:29 AM: [1/4] Resolving packages...
11:09:31 AM: [2/4] Fetching packages...
11:09:31 AM: (node:1201) [DEP0005] DeprecationWarning: Buffer() is deprecated due to security and usability issues. Please use the Buffer.alloc(), Buffer.allocUnsafe(), or Buffer.from() methods instead.
11:10:04 AM: info [email protected]: The platform "linux" is incompatible with this module.
11:10:04 AM: info "[email protected]" is an optional dependency and failed compatibility check. Excluding it from installation.
11:10:04 AM: [3/4] Linking dependencies...
11:10:04 AM: warning "gatsby > [email protected]" has incorrect peer dependency "graphql@^0.12.0 || ^0.13.0".
11:10:04 AM: warning "gatsby > [email protected]" has incorrect peer dependency "graphql@^0.10.0 || ^0.11.0 || ^0.12.0 || ^0.13.0".
11:10:04 AM: warning "gatsby > [email protected]" has incorrect peer dependency "graphql@^0.13.0".
11:10:04 AM: warning "gatsby-plugin-netlify > [email protected]" has unmet peer dependency "webpack@>=4.4.0".
11:10:04 AM: warning "gatsby-plugin-sass > [email protected]" has unmet peer dependency "webpack@^3.0.0 || ^4.0.0".
11:10:04 AM: warning " > [email protected]" has unmet peer dependency "webpack@^2.0.0 || ^3.0.0 || ^4.0.0".
11:10:04 AM: warning "netlify-cms > [email protected]" has unmet peer dependency "immutable@^3.7.6".
11:10:04 AM: warning "netlify-cms > [email protected]" has unmet peer dependency "netlify-cms-lib-auth@^2.0.4".
11:10:04 AM: warning "netlify-cms > [email protected]" has unmet peer dependency "netlify-cms-lib-util@^2.1.0".
11:10:04 AM: warning "netlify-cms > [email protected]" has unmet peer dependency "netlify-cms-ui-default@^2.0.6".
11:10:04 AM: warning "netlify-cms > [email protected]" has unmet peer dependency "react-emotion@^9.2.6".
11:10:04 AM: warning "netlify-cms > [email protected]" has unmet peer dependency "immutable@^3.7.6".
11:10:04 AM: warning "netlify-cms > [email protected]" has unmet peer dependency "netlify-cms-lib-auth@^2.0.0".
11:10:04 AM: warning "netlify-cms > [email protected]" has unmet peer dependency "netlify-cms-lib-util@^2.0.0".
11:10:04 AM: warning "netlify-cms > [email protected]" has unmet peer dependency "netlify-cms-ui-default@^2.0.0".
11:10:04 AM: warning "netlify-cms > [email protected]" has unmet peer dependency "react-emotion@^9.2.6".
11:10:04 AM: warning "netlify-cms > [email protected]" has unmet peer dependency "netlify-cms-lib-auth@^2.0.0".
11:10:04 AM: warning "netlify-cms > [email protected]" has unmet peer dependency "netlify-cms-lib-util@^2.0.0".
11:10:04 AM: warning "netlify-cms > [email protected]" has unmet peer dependency "netlify-cms-ui-default@^2.0.0".
11:10:04 AM: warning "netlify-cms > [email protected]" has unmet peer dependency "react-emotion@^9.2.6".
11:10:04 AM: warning "netlify-cms > [email protected]" has unmet peer dependency "immutable@^3.7.6".
11:10:04 AM: warning "netlify-cms > [email protected]" has unmet peer dependency "netlify-cms-lib-auth@^2.0.0".
11:10:04 AM: warning "netlify-cms > [email protected]" has unmet peer dependency "netlify-cms-lib-util@^2.0.0".
11:10:04 AM: warning "netlify-cms > [email protected]" has unmet peer dependency "netlify-cms-ui-default@^2.0.0".
11:10:04 AM: warning "netlify-cms > [email protected]" has unmet peer dependency "react-emotion@^9.2.6".
11:10:04 AM: warning "netlify-cms > [email protected]" has unmet peer dependency "immutable@^3.8.2".
11:10:04 AM: warning "netlify-cms > [email protected]" has unmet peer dependency "netlify-cms-lib-util@^2.0.0".
11:10:04 AM: warning "netlify-cms > [email protected]" has unmet peer dependency "netlify-cms-ui-default@^2.0.0".
11:10:04 AM: warning "netlify-cms > [email protected]" has unmet peer dependency "react-emotion@^9.2.6".
11:10:04 AM: warning "netlify-cms > [email protected]" has unmet peer dependency "react-immutable-proptypes@^2.1.0".
11:10:04 AM: warning "netlify-cms > [email protected]" has unmet peer dependency "netlify-cms-lib-util@^2.0.4".
11:10:04 AM: warning "netlify-cms > [email protected]" has unmet peer dependency "netlify-cms-ui-default@^2.0.0".
11:10:04 AM: warning "netlify-cms > [email protected]" has unmet peer dependency "react-immutable-proptypes@^2.1.0".
11:10:04 AM: warning "netlify-cms > [email protected]" has unmet peer dependency "moment@^2.11.2".
11:10:04 AM: warning "netlify-cms > [email protected]" has unmet peer dependency "netlify-cms-ui-default@^2.0.0".
11:10:04 AM: warning "netlify-cms > [email protected]" has unmet peer dependency "react-emotion@^9.2.6".
11:10:04 AM: warning "netlify-cms > [email protected]" has unmet peer dependency "immutable@^3.7.6".
11:10:04 AM: warning "netlify-cms > [email protected]" has unmet peer dependency "netlify-cms-ui-default@^2.0.0".
11:10:04 AM: warning "netlify-cms > [email protected]" has unmet peer dependency "react-emotion@^9.2.6".
11:10:04 AM: warning "netlify-cms > [email protected]" has unmet peer dependency "react-immutable-proptypes@^2.1.0".
11:10:04 AM: warning "netlify-cms > [email protected]" has unmet peer dependency "immutable@^3.7.6".
11:10:04 AM: warning "netlify-cms > [email protected]" has unmet peer dependency "netlify-cms-ui-default@^2.0.0".
11:10:04 AM: warning "netlify-cms > [email protected]" has unmet peer dependency "react-emotion@^9.2.6".
11:10:04 AM: warning "netlify-cms > [email protected]" has unmet peer dependency "immutable@^3.7.6".
11:10:04 AM: warning "netlify-cms > [email protected]" has unmet peer dependency "netlify-cms-ui-default@^2.0.0".
11:10:04 AM: warning "netlify-cms > [email protected]" has unmet peer dependency "react-emotion@^9.2.6".
11:10:04 AM: warning "netlify-cms > [email protected]" has unmet peer dependency "react-immutable-proptypes@^2.1.0".
11:10:04 AM: warning "netlify-cms > [email protected]" has unmet peer dependency "netlify-cms-ui-default@^2.0.0".
11:10:04 AM: warning "netlify-cms > [email protected]" has unmet peer dependency "react-immutable-proptypes@^2.1.0".
11:10:04 AM: warning "netlify-cms > [email protected]" has unmet peer dependency "immutable@^3.7.6".
11:10:04 AM: warning "netlify-cms > [email protected]" has unmet peer dependency "netlify-cms-ui-default@^2.0.0".
11:10:04 AM: warning "netlify-cms > [email protected]" has unmet peer dependency "react-emotion@^9.2.5".
11:10:04 AM: warning "netlify-cms > [email protected]" has unmet peer dependency "react-immutable-proptypes@^2.1.0".
11:10:04 AM: warning "netlify-cms > [email protected]" has unmet peer dependency "netlify-cms-ui-default@^2.0.0".
11:10:04 AM: warning "netlify-cms > [email protected]" has unmet peer dependency "immutable@^3.7.6".
11:10:04 AM: warning "netlify-cms > [email protected]" has unmet peer dependency "netlify-cms-ui-default@^2.0.0".
11:10:04 AM: warning "netlify-cms > [email protected]" has unmet peer dependency "react-emotion@^9.2.6".
11:10:04 AM: warning "netlify-cms > [email protected]" has unmet peer dependency "react-immutable-proptypes@^2.1.0".
11:10:04 AM: warning "netlify-cms > [email protected]" has unmet peer dependency "immutable@^3.7.6".
11:10:04 AM: warning "netlify-cms > [email protected]" has unmet peer dependency "netlify-cms-ui-default@^2.0.0".
11:10:04 AM: warning "netlify-cms > [email protected]" has unmet peer dependency "react-emotion@^9.2.5".
11:10:04 AM: warning "netlify-cms > [email protected]" has unmet peer dependency "immutable@^3.7.6".
11:10:04 AM: warning "netlify-cms > [email protected]" has unmet peer dependency "netlify-cms-ui-default@^2.0.0".
11:10:04 AM: warning "netlify-cms > [email protected]" has unmet peer dependency "react-immutable-proptypes@^2.1.0".
11:10:04 AM: warning "netlify-cms > [email protected]" has unmet peer dependency "netlify-cms-ui-default@^2.0.0".
11:10:04 AM: warning "netlify-cms > [email protected]" has unmet peer dependency "netlify-cms-ui-default@^2.0.0".
11:10:04 AM: warning "netlify-cms > netlify-cms-widget-date > [email protected]" has unmet peer dependency "moment@>=2.16.0".
11:10:04 AM: warning "netlify-cms > netlify-cms-widget-markdown > [email protected]" has unmet peer dependency "immutable@>=3.8.1".
11:10:04 AM: warning "netlify-cms > netlify-cms-widget-markdown > [email protected]" has unmet peer dependency "immutable@^3.8.2".
11:10:04 AM: warning "netlify-cms > netlify-cms-widget-markdown > [email protected]" has incorrect peer dependency "slate@^0.32.0".
11:10:04 AM: warning "netlify-cms > netlify-cms-widget-markdown > [email protected]" has unmet peer dependency "immutable@^3.8.1".
11:10:04 AM: warning "netlify-cms > netlify-cms-widget-markdown > [email protected]" has incorrect peer dependency "slate@^0.33.3".
11:10:04 AM: warning "netlify-cms > netlify-cms-widget-markdown > [email protected]" has unmet peer dependency "slate-schema-violations@^0.1.7".
11:10:04 AM: warning "netlify-cms > netlify-cms-widget-markdown > [email protected]" has unmet peer dependency "immutable@>=3.8.1".
11:10:04 AM: warning "netlify-cms > netlify-cms-widget-markdown > [email protected]" has unmet peer dependency "immutable@>=3.8.1".
11:10:04 AM: warning "netlify-cms > netlify-cms-core > redux-notifications > [email protected]" has incorrect peer dependency "redux@^2.0.0 || ^3.0.0".
11:10:04 AM: warning "netlify-cms > netlify-cms-widget-markdown > slate-react > [email protected]" has unmet peer dependency "immutable@>=3.8.1".
11:10:04 AM: warning " > [email protected]" has incorrect peer dependency "react@^16.8.3".
11:10:21 AM: [4/4] Building fresh packages...
11:10:26 AM: Done in 56.59s.
11:10:26 AM: NPM modules installed using Yarn
11:10:26 AM: warning package.json: No license field
11:10:26 AM: Started restoring cached go cache
11:10:26 AM: Finished restoring cached go cache
11:10:27 AM: unset GOOS;
11:10:27 AM: unset GOARCH;
11:10:27 AM: export GOROOT='/opt/buildhome/.gimme/versions/go1.12.linux.amd64';
11:10:27 AM: export PATH="/opt/buildhome/.gimme/versions/go1.12.linux.amd64/bin:${PATH}";
11:10:27 AM: go version >&2;
11:10:27 AM: export GIMME_ENV='/opt/buildhome/.gimme/env/go1.12.linux.amd64.env';
11:10:27 AM: go version go1.12 linux/amd64
11:10:27 AM: Installing missing commands
11:10:27 AM: Verify run directory
11:10:27 AM: Executing user command: npm run build
11:10:27 AM: > [email protected] build /opt/build/repo
11:10:27 AM: > run-p build:**
11:10:28 AM: > [email protected] build:app /opt/build/repo
11:10:28 AM: > npm run clean && gatsby build
11:10:28 AM: > [email protected] clean /opt/build/repo
11:10:28 AM: > rimraf .cache public
11:10:32 AM: Using environment config: 'production'
11:10:32 AM: success open and validate gatsby-configs — 0.059 s
11:10:32 AM: success load plugins — 0.454 s
11:10:34 AM: success onPreInit — 1.665 s
11:10:34 AM: success delete html and css files from previous builds — 0.008 s
11:10:34 AM: success initialize cache — 0.011 s
11:10:34 AM: success copy gatsby files — 0.035 s
11:10:34 AM: success onPreBootstrap — 0.009 s
11:10:51 AM: success source and transform nodes — 17.231 s
11:10:52 AM: success building schema — 0.896 s
11:10:55 AM: success createPages — 2.772 s
11:10:55 AM: success createPagesStatefully — 0.062 s
11:10:55 AM: success onPreExtractQueries — 0.006 s
11:10:56 AM: success update schema — 0.712 s
11:10:56 AM: success extract queries from components — 0.166 s
11:10:57 AM: success run graphql queries — 1.068 s — 1460/1460 1368.43 queries/second
11:10:57 AM: success write out page data — 0.035 s
11:10:57 AM: success write out redirect data — 0.001 s
11:10:57 AM: success onPostBootstrap — 0.010 s
11:10:57 AM: info bootstrap finished - 28.304 s
11:12:14 AM: success Building production JavaScript and CSS bundles — 76.329 s
11:12:14 AM:
11:12:14 AM: gatsby-plugin-purgecss:
11:12:14 AM: Previous CSS Size: 305.33 KB
11:12:14 AM: New CSS Size: 305.33 KB (-0.00%)
11:12:14 AM: Removed ~0.00 KB of CSS
11:12:14 AM:
11:12:23 AM: error Building static HTML failed
11:12:23 AM: See our docs page on debugging HTML builds for help https://gatsby.app/debug-html
11:12:23 AM: 48 | window.YouTubeIframeLoader = YouTubeIframeLoader;
11:12:23 AM: 49 | }
11:12:23 AM: > 50 | }(window));
11:12:23 AM: | ^
11:12:23 AM: 51 |
11:12:23 AM:
11:12:23 AM: WebpackError: ReferenceError: window is not defined
11:12:23 AM:
11:12:23 AM: - index.js:50 Object../node_modules/youtube-iframe/index.js
11:12:23 AM: [lib]/[youtube-iframe]/index.js:50:2
11:12:23 AM:
11:12:23 AM: - bootstrap:19 __webpack_require__
11:12:23 AM: lib/webpack/bootstrap:19:1
11:12:23 AM:
11:12:23 AM: - MediaAutoTrack.js:15 Object../node_modules/@aws-amplify/analytics/lib/Provid ers/AmazonPersonalizeHelper/MediaAutoTrack.js
11:12:23 AM: [lib]/[@aws-amplify]/analytics/lib/Providers/AmazonPersonalizeHelper/MediaAu toTrack.js:15:27
11:12:23 AM:
11:12:23 AM: - bootstrap:19 __webpack_require__
11:12:23 AM: lib/webpack/bootstrap:19:1
11:12:23 AM:
11:12:23 AM: - index.js:7 Object../node_modules/@aws-amplify/analytics/lib/Providers/Amazon PersonalizeHelper/index.js
11:12:23 AM: [lib]/[@aws-amplify]/analytics/lib/Providers/AmazonPersonalizeHelper/index.j s:7:10
11:12:23 AM:
11:12:23 AM: - bootstrap:19 __webpack_require__
11:12:23 AM: lib/webpack/bootstrap:19:1
11:12:23 AM:
11:12:23 AM: - AmazonPersonalizeProvider.js:52 Object../node_modules/@aws-amplify/analytics /lib/Providers/AmazonPersonalizeProvider.js
11:12:23 AM: [lib]/[@aws-amplify]/analytics/lib/Providers/AmazonPersonalizeProvider.js:52 :33
11:12:23 AM:
11:12:23 AM: - bootstrap:19 __webpack_require__
11:12:23 AM: lib/webpack/bootstrap:19:1
11:12:23 AM:
11:12:23 AM: - index.js:7 Object../node_modules/@aws-amplify/analytics/lib/Providers/index. js
11:12:23 AM: [lib]/[@aws-amplify]/analytics/lib/Providers/index.js:7:35
11:12:23 AM:
11:12:23 AM: - bootstrap:19 __webpack_require__
11:12:23 AM: lib/webpack/bootstrap:19:1
11:12:23 AM:
11:12:23 AM: - index.js:33 Object../node_modules/@aws-amplify/analytics/lib/index.js
11:12:23 AM: [lib]/[@aws-amplify]/analytics/lib/index.js:33:10
11:12:24 AM: failed during stage 'building site': Build script returned non-zero exit code: 1
11:12:23 AM:
11:12:23 AM: - bootstrap:19 __webpack_require__
11:12:23 AM: lib/webpack/bootstrap:19:1
11:12:23 AM:
11:12:24 AM: Shutting down logging, 58 messages pending

I am using netlify for my server side

If you are certain you are not using window a package likely is.

You have to define an empty window in webpack.

It’s not super straight forward, but this will lead you in the right direction:

https://stackoverflow.com/questions/37656592/define-global-variable-with-webpack

I'm not really sure why is this issue closed? This issue, in fact, is probably the most critical one when Gatsby is concerned and the entire philosophy of it should be changed and fixed.

It's really bad that browser and SSR logic are coupled. Not to mention the fact that you run one version of the code in development and divergence of it in production. This is really bad. Why would you make such builds? The only difference between those two should be enabled debugging functionalities in development and e.g. source maps or whatever. This really makes it difficult and engaging to use Gatsby.

In my opinion, you should reopen this and prioritize this issue. This issue makes people literally give up on thousands of modules out there that depend on window and not all of them can be imported in componentDidMount e.g. HOC like modules etc.

While I don’t disagree this is a pain point. One could argue those libraries written with logic around the window variable are not suited for SSR use. Those libraries themselves should check if window is defined and work in SSR mode.

No other comments to the deeper point you are making, that’s a philosophical discussion better suited to the maintainers.

With all due respect, what you wrote makes no sense. Why would someone who is building a "browser-only" library check if window object exists? Can you name or point to a single library on the entire NPM registry that does this? Or you are saying that all those libraries that people wrote are written wrongly?

Or people should consider that there is a framework called "Gatsby" that needs this? One should be able to use Gatsby on one or another end and those ends should be ENTIRELY decoupled. This is the only point, really. Nothing philosophical about it.

By design Gatsby is a static site generator. Most of the work it does to accomplish that is done outside of the browser at compile time. It’s not only a “client” or “browser” tool.

Server side rendering is by definition done on the “server” side, where “window” is not a thing.

Gatsby’s compiling is done with Webpack, webpack by default does not wire up a window variable. From my experience there is not only one way to adapt client libraries to work under webpack. This leads to the Gatsby config itself not capable of providing a simple one shot solution to fix all libraries that depend on “window”.

FWIW I think it makes sense to separate the part so of the tool to discuss which part of it is impeding what you wish to do.