Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Window is not defiend #309

Closed
hitchcott opened this issue Jun 2, 2016 · 37 comments

Comments

Projects
None yet
@hitchcott
Copy link
Contributor

commented Jun 2, 2016

I'm trying to use a semantic-ui import along with my components.

Works fine in development but if I try to gatsby build, I get Error: ReferenceError: window is not defined.

I'm doing this:

import $ from 'jquery';
$.fn.transition = require('semantic-ui-transition');
$.fn.dropdown = require('semantic-ui-dropdown');

Is there any workaround?

Edit: Managed to get it working with:

try {
  $.fn.sidebar = require('semantic-ui-sidebar');
} catch (e) {
  console.log(e)
}
@KyleAMathews

This comment has been minimized.

Copy link
Contributor

commented Jun 2, 2016

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.

@AndersDJohnson

This comment has been minimized.

Copy link
Member

commented Jun 17, 2016

@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?

@Maxhodges

This comment has been minimized.

Copy link

commented Jul 6, 2016

@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?

@kylegach

This comment has been minimized.

Copy link
Contributor

commented Jul 6, 2016

@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.

@cybermill

This comment has been minimized.

Copy link

commented Dec 23, 2016

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.

@Tseberechts

This comment has been minimized.

Copy link

commented May 17, 2017

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.
@KyleAMathews

This comment has been minimized.

Copy link
Contributor

commented May 17, 2017

@Tseberechts

This comment has been minimized.

Copy link

commented May 17, 2017

That worked! Thx.

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

@mohhasbias

This comment has been minimized.

Copy link

commented Nov 19, 2017

the error is disappeared when using componetDidMount

@gregorskii

This comment has been minimized.

Copy link

commented Nov 28, 2017

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!

@heldrida

This comment has been minimized.

Copy link

commented Nov 28, 2017

@gregorskii

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

then, windowGlobal.localStorage

@gregorskii

This comment has been minimized.

Copy link

commented Nov 28, 2017

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.

@CallMeLaNN

This comment has been minimized.

Copy link

commented Mar 15, 2018

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() {
    // ...
  }
}

// ...
@jafaeldon

This comment has been minimized.

Copy link

commented May 7, 2018

@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);
    }
  }
@joshwcomeau

This comment has been minimized.

Copy link

commented May 12, 2018

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?

@justintemps

This comment has been minimized.

Copy link

commented Sep 20, 2018

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?

@hackhat

This comment has been minimized.

Copy link

commented Oct 14, 2018

@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.

nbw added a commit to nbw/whentochat that referenced this issue Dec 3, 2018

Check window.location in componentDidMount
Fixes a Gatsby build error where window is not available.

Refer to: gatsbyjs/gatsby#309

cbillowes added a commit to cbillowes/curious-programmer-oxygen that referenced this issue Dec 17, 2018

@lili21

This comment has been minimized.

Copy link

commented Dec 19, 2018

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

@PHILATSHAKA

This comment has been minimized.

Copy link

commented Jan 8, 2019

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(

<Coverflow
displayQuantityOfSide={2}
navigation
infiniteScroll
enableHeading
active={0}
media={{
'@media (max-width: 720px)': {
width: '100%',
height: '200px'
},
'@media (min-width: 720px)': {
width: '100%',
height: '400px',
}
}}
>
Chairperson
Deputy Chairperson
General Secretary
Recording Secretary
Treasury
Marketing

  </Coverflow>
</StyleRoot>
)

}
}

export default Team;

@wmlutz

This comment has been minimized.

Copy link

commented Mar 6, 2019

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.

@muescha

This comment has been minimized.

Copy link
Contributor

commented Mar 6, 2019

@jonniebigodes

This comment has been minimized.

Copy link
Contributor

commented Mar 6, 2019

@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"

@wmlutz

This comment has been minimized.

Copy link

commented Mar 6, 2019

@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?

@wmlutz

This comment has been minimized.

Copy link

commented Mar 7, 2019

@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)
    }
  }
@joserocha3

This comment has been minimized.

Copy link

commented Mar 7, 2019

@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)
    }
  }
@wmlutz

This comment has been minimized.

Copy link

commented Mar 7, 2019

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

@jonniebigodes

This comment has been minimized.

Copy link
Contributor

commented Mar 7, 2019

@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?

@joserocha3

This comment has been minimized.

Copy link

commented Mar 7, 2019

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 #309 (comment) mentioned above.

@DanielRuf

This comment has been minimized.

Copy link
Member

commented Mar 7, 2019

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

Forking is not needed if you use patch-package.

@DanielRuf

This comment has been minimized.

Copy link
Member

commented Mar 7, 2019

Also see webpack/webpack#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.

@TakayasuNasu TakayasuNasu referenced this issue Mar 24, 2019

Closed

build #6

latviancoder added a commit to latviancoder/staleclosures.dev that referenced this issue Mar 26, 2019

latviancoder added a commit to latviancoder/staleclosures.dev that referenced this issue Mar 26, 2019

latviancoder added a commit to latviancoder/staleclosures.dev that referenced this issue Mar 26, 2019

olegshilov pushed a commit to dialogs/homepage-next that referenced this issue Apr 26, 2019

@leonardolouie

This comment has been minimized.

Copy link

commented Jun 20, 2019

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 gatsby-netlify-cms-sho@0.0.1: 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 fsevents@1.2.7: The platform "linux" is incompatible with this module.
11:10:04 AM: info "fsevents@1.2.7" 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 > eslint-plugin-graphql@2.1.1" has incorrect peer dependency "graphql@^0.12.0 || ^0.13.0".
11:10:04 AM: warning "gatsby > express-graphql@0.6.12" has incorrect peer dependency "graphql@^0.10.0 || ^0.11.0 || ^0.12.0 || ^0.13.0".
11:10:04 AM: warning "gatsby > graphql-tools@3.1.1" has incorrect peer dependency "graphql@^0.13.0".
11:10:04 AM: warning "gatsby-plugin-netlify > webpack-assets-manifest@3.1.1" has unmet peer dependency "webpack@>=4.4.0".
11:10:04 AM: warning "gatsby-plugin-sass > sass-loader@7.1.0" has unmet peer dependency "webpack@^3.0.0 || ^4.0.0".
11:10:04 AM: warning " > lodash-webpack-plugin@0.11.5" has unmet peer dependency "webpack@^2.0.0 || ^3.0.0 || ^4.0.0".
11:10:04 AM: warning "netlify-cms > netlify-cms-backend-bitbucket@2.1.0" has unmet peer dependency "immutable@^3.7.6".
11:10:04 AM: warning "netlify-cms > netlify-cms-backend-bitbucket@2.1.0" has unmet peer dependency "netlify-cms-lib-auth@^2.0.4".
11:10:04 AM: warning "netlify-cms > netlify-cms-backend-bitbucket@2.1.0" has unmet peer dependency "netlify-cms-lib-util@^2.1.0".
11:10:04 AM: warning "netlify-cms > netlify-cms-backend-bitbucket@2.1.0" has unmet peer dependency "netlify-cms-ui-default@^2.0.6".
11:10:04 AM: warning "netlify-cms > netlify-cms-backend-bitbucket@2.1.0" has unmet peer dependency "react-emotion@^9.2.6".
11:10:04 AM: warning "netlify-cms > netlify-cms-backend-git-gateway@2.2.0" has unmet peer dependency "immutable@^3.7.6".
11:10:04 AM: warning "netlify-cms > netlify-cms-backend-git-gateway@2.2.0" has unmet peer dependency "netlify-cms-lib-auth@^2.0.0".
11:10:04 AM: warning "netlify-cms > netlify-cms-backend-git-gateway@2.2.0" has unmet peer dependency "netlify-cms-lib-util@^2.0.0".
11:10:04 AM: warning "netlify-cms > netlify-cms-backend-git-gateway@2.2.0" has unmet peer dependency "netlify-cms-ui-default@^2.0.0".
11:10:04 AM: warning "netlify-cms > netlify-cms-backend-git-gateway@2.2.0" has unmet peer dependency "react-emotion@^9.2.6".
11:10:04 AM: warning "netlify-cms > netlify-cms-backend-github@2.2.0" has unmet peer dependency "netlify-cms-lib-auth@^2.0.0".
11:10:04 AM: warning "netlify-cms > netlify-cms-backend-github@2.2.0" has unmet peer dependency "netlify-cms-lib-util@^2.0.0".
11:10:04 AM: warning "netlify-cms > netlify-cms-backend-github@2.2.0" has unmet peer dependency "netlify-cms-ui-default@^2.0.0".
11:10:04 AM: warning "netlify-cms > netlify-cms-backend-github@2.2.0" has unmet peer dependency "react-emotion@^9.2.6".
11:10:04 AM: warning "netlify-cms > netlify-cms-backend-gitlab@2.1.1" has unmet peer dependency "immutable@^3.7.6".
11:10:04 AM: warning "netlify-cms > netlify-cms-backend-gitlab@2.1.1" has unmet peer dependency "netlify-cms-lib-auth@^2.0.0".
11:10:04 AM: warning "netlify-cms > netlify-cms-backend-gitlab@2.1.1" has unmet peer dependency "netlify-cms-lib-util@^2.0.0".
11:10:04 AM: warning "netlify-cms > netlify-cms-backend-gitlab@2.1.1" has unmet peer dependency "netlify-cms-ui-default@^2.0.0".
11:10:04 AM: warning "netlify-cms > netlify-cms-backend-gitlab@2.1.1" has unmet peer dependency "react-emotion@^9.2.6".
11:10:04 AM: warning "netlify-cms > netlify-cms-backend-test@2.0.6" has unmet peer dependency "immutable@^3.8.2".
11:10:04 AM: warning "netlify-cms > netlify-cms-backend-test@2.0.6" has unmet peer dependency "netlify-cms-lib-util@^2.0.0".
11:10:04 AM: warning "netlify-cms > netlify-cms-backend-test@2.0.6" has unmet peer dependency "netlify-cms-ui-default@^2.0.0".
11:10:04 AM: warning "netlify-cms > netlify-cms-backend-test@2.0.6" has unmet peer dependency "react-emotion@^9.2.6".
11:10:04 AM: warning "netlify-cms > netlify-cms-backend-test@2.0.6" has unmet peer dependency "react-immutable-proptypes@^2.1.0".
11:10:04 AM: warning "netlify-cms > netlify-cms-media-library-uploadcare@0.3.3" has unmet peer dependency "netlify-cms-lib-util@^2.0.4".
11:10:04 AM: warning "netlify-cms > netlify-cms-widget-boolean@2.0.5" has unmet peer dependency "netlify-cms-ui-default@^2.0.0".
11:10:04 AM: warning "netlify-cms > netlify-cms-widget-boolean@2.0.5" has unmet peer dependency "react-immutable-proptypes@^2.1.0".
11:10:04 AM: warning "netlify-cms > netlify-cms-widget-date@2.1.0" has unmet peer dependency "moment@^2.11.2".
11:10:04 AM: warning "netlify-cms > netlify-cms-widget-date@2.1.0" has unmet peer dependency "netlify-cms-ui-default@^2.0.0".
11:10:04 AM: warning "netlify-cms > netlify-cms-widget-date@2.1.0" has unmet peer dependency "react-emotion@^9.2.6".
11:10:04 AM: warning "netlify-cms > netlify-cms-widget-file@2.2.0" has unmet peer dependency "immutable@^3.7.6".
11:10:04 AM: warning "netlify-cms > netlify-cms-widget-file@2.2.0" has unmet peer dependency "netlify-cms-ui-default@^2.0.0".
11:10:04 AM: warning "netlify-cms > netlify-cms-widget-file@2.2.0" has unmet peer dependency "react-emotion@^9.2.6".
11:10:04 AM: warning "netlify-cms > netlify-cms-widget-file@2.2.0" has unmet peer dependency "react-immutable-proptypes@^2.1.0".
11:10:04 AM: warning "netlify-cms > netlify-cms-widget-image@2.1.1" has unmet peer dependency "immutable@^3.7.6".
11:10:04 AM: warning "netlify-cms > netlify-cms-widget-image@2.1.1" has unmet peer dependency "netlify-cms-ui-default@^2.0.0".
11:10:04 AM: warning "netlify-cms > netlify-cms-widget-image@2.1.1" has unmet peer dependency "react-emotion@^9.2.6".
11:10:04 AM: warning "netlify-cms > netlify-cms-widget-list@2.1.1" has unmet peer dependency "immutable@^3.7.6".
11:10:04 AM: warning "netlify-cms > netlify-cms-widget-list@2.1.1" has unmet peer dependency "netlify-cms-ui-default@^2.0.0".
11:10:04 AM: warning "netlify-cms > netlify-cms-widget-list@2.1.1" has unmet peer dependency "react-emotion@^9.2.6".
11:10:04 AM: warning "netlify-cms > netlify-cms-widget-list@2.1.1" has unmet peer dependency "react-immutable-proptypes@^2.1.0".
11:10:04 AM: warning "netlify-cms > netlify-cms-widget-map@1.1.0" has unmet peer dependency "netlify-cms-ui-default@^2.0.0".
11:10:04 AM: warning "netlify-cms > netlify-cms-widget-map@1.1.0" has unmet peer dependency "react-immutable-proptypes@^2.1.0".
11:10:04 AM: warning "netlify-cms > netlify-cms-widget-markdown@2.1.1" has unmet peer dependency "immutable@^3.7.6".
11:10:04 AM: warning "netlify-cms > netlify-cms-widget-markdown@2.1.1" has unmet peer dependency "netlify-cms-ui-default@^2.0.0".
11:10:04 AM: warning "netlify-cms > netlify-cms-widget-markdown@2.1.1" has unmet peer dependency "react-emotion@^9.2.5".
11:10:04 AM: warning "netlify-cms > netlify-cms-widget-markdown@2.1.1" has unmet peer dependency "react-immutable-proptypes@^2.1.0".
11:10:04 AM: warning "netlify-cms > netlify-cms-widget-number@2.1.1" has unmet peer dependency "netlify-cms-ui-default@^2.0.0".
11:10:04 AM: warning "netlify-cms > netlify-cms-widget-object@2.0.6" has unmet peer dependency "immutable@^3.7.6".
11:10:04 AM: warning "netlify-cms > netlify-cms-widget-object@2.0.6" has unmet peer dependency "netlify-cms-ui-default@^2.0.0".
11:10:04 AM: warning "netlify-cms > netlify-cms-widget-object@2.0.6" has unmet peer dependency "react-emotion@^9.2.6".
11:10:04 AM: warning "netlify-cms > netlify-cms-widget-object@2.0.6" has unmet peer dependency "react-immutable-proptypes@^2.1.0".
11:10:04 AM: warning "netlify-cms > netlify-cms-widget-relation@2.0.6" has unmet peer dependency "immutable@^3.7.6".
11:10:04 AM: warning "netlify-cms > netlify-cms-widget-relation@2.0.6" has unmet peer dependency "netlify-cms-ui-default@^2.0.0".
11:10:04 AM: warning "netlify-cms > netlify-cms-widget-relation@2.0.6" has unmet peer dependency "react-emotion@^9.2.5".
11:10:04 AM: warning "netlify-cms > netlify-cms-widget-select@2.1.1" has unmet peer dependency "immutable@^3.7.6".
11:10:04 AM: warning "netlify-cms > netlify-cms-widget-select@2.1.1" has unmet peer dependency "netlify-cms-ui-default@^2.0.0".
11:10:04 AM: warning "netlify-cms > netlify-cms-widget-select@2.1.1" has unmet peer dependency "react-immutable-proptypes@^2.1.0".
11:10:04 AM: warning "netlify-cms > netlify-cms-widget-string@2.0.4" has unmet peer dependency "netlify-cms-ui-default@^2.0.0".
11:10:04 AM: warning "netlify-cms > netlify-cms-widget-text@2.0.6" has unmet peer dependency "netlify-cms-ui-default@^2.0.0".
11:10:04 AM: warning "netlify-cms > netlify-cms-widget-date > react-datetime@2.16.3" has unmet peer dependency "moment@>=2.16.0".
11:10:04 AM: warning "netlify-cms > netlify-cms-widget-markdown > slate@0.34.7" has unmet peer dependency "immutable@>=3.8.1".
11:10:04 AM: warning "netlify-cms > netlify-cms-widget-markdown > slate-edit-list@0.11.3" has unmet peer dependency "immutable@^3.8.2".
11:10:04 AM: warning "netlify-cms > netlify-cms-widget-markdown > slate-edit-list@0.11.3" has incorrect peer dependency "slate@^0.32.0".
11:10:04 AM: warning "netlify-cms > netlify-cms-widget-markdown > slate-edit-table@0.15.2" has unmet peer dependency "immutable@^3.8.1".
11:10:04 AM: warning "netlify-cms > netlify-cms-widget-markdown > slate-edit-table@0.15.2" has incorrect peer dependency "slate@^0.33.3".
11:10:04 AM: warning "netlify-cms > netlify-cms-widget-markdown > slate-edit-table@0.15.2" has unmet peer dependency "slate-schema-violations@^0.1.7".
11:10:04 AM: warning "netlify-cms > netlify-cms-widget-markdown > slate-plain-serializer@0.5.41" has unmet peer dependency "immutable@>=3.8.1".
11:10:04 AM: warning "netlify-cms > netlify-cms-widget-markdown > slate-react@0.12.9" has unmet peer dependency "immutable@>=3.8.1".
11:10:04 AM: warning "netlify-cms > netlify-cms-core > redux-notifications > react-redux@4.4.9" has incorrect peer dependency "redux@^2.0.0 || ^3.0.0".
11:10:04 AM: warning "netlify-cms > netlify-cms-widget-markdown > slate-react > slate-prop-types@0.4.67" has unmet peer dependency "immutable@>=3.8.1".
11:10:04 AM: warning " > react-redux@7.1.0" 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: > gatsby-netlify-cms-sho@0.0.1 build /opt/build/repo
11:10:27 AM: > run-p build:**
11:10:28 AM: > gatsby-netlify-cms-sho@0.0.1 build:app /opt/build/repo
11:10:28 AM: > npm run clean && gatsby build
11:10:28 AM: > gatsby-netlify-cms-sho@0.0.1 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

@leonardolouie

This comment has been minimized.

Copy link

commented Jun 20, 2019

I am using netlify for my server side

@gregorskii

This comment has been minimized.

Copy link

commented Jun 20, 2019

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

@agjs

This comment has been minimized.

Copy link

commented Jun 24, 2019

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.

@gregorskii

This comment has been minimized.

Copy link

commented Jun 24, 2019

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.

@agjs

This comment has been minimized.

Copy link

commented Jun 24, 2019

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.

@gregorskii

This comment has been minimized.

Copy link

commented Jun 24, 2019

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.