Gatsby: [v2] Error: Gatsby-Browser.js - window is undefined

Created on 13 Aug 2018  ·  9Comments  ·  Source: gatsbyjs/gatsby

Hi, I'm getting this error in my gatsby-browser.js during gatsby develop.

gatsby-browser.js

import picturefill from 'picturefill';

export function onClientEntry() {
  picturefill();
}

export function onRouteUpdate() {
  window.scrollTo(0, 0); // When moving to another page it will always go top
  picturefill();
  console.log('ReactDOM.render has executed');
  if (process.env.GATSBY_ENV !== 'production') {
    let ev = document.createElement('script');
    ev.type = 'text/javascript';
    ev.async = true;
    ev.setAttribute('data-ev-tag-pid', 8873);
    ev.setAttribute('data-ev-tag-ocid', 2014);
    ev.src =
      ('https:' == document.location.protocol ? 'https://' : 'http://') +
      'c.someurl.com/doe/tag.js';
    let s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(ev, s);
  }
}

const windowWidth = window.innerWidth;

export function shouldUpdateScroll(args) {
  return args.prevRouterProps == null || windowWidth < 750 ? true : false;
}

Expected Result:

Compiled Successfully

Actual Result :

Console Log

info bootstrap finished - 339.184 s

(node:7908) ExperimentalWarning: The fs.promises API is experimental
error window is not defined


  ReferenceError: window is not defined

  - render-page.js:30357 Object../node_modules/picturefill/dist/picturefill.js
    D:/Workspace/Gatsby V2 Migration Workspace/Backup/MT/public/render-page.js:30357:4

  - render-page.js:30 __webpack_require__
    D:/Workspace/Gatsby V2 Migration Workspace/Backup/MT/public/render-page.js:30:30

  - render-page.js:1680 Object../gatsby-browser.js
    D:/Workspace/Gatsby V2 Migration Workspace/Backup/MT/public/render-page.js:1680:19

  - render-page.js:30 __webpack_require__
    D:/Workspace/Gatsby V2 Migration Workspace/Backup/MT/public/render-page.js:30:30

  - render-page.js:112 Object../.cache/api-runner-browser-plugins.js
    D:/Workspace/Gatsby V2 Migration Workspace/Backup/MT/public/render-page.js:112:11

  - render-page.js:30 __webpack_require__
    D:/Workspace/Gatsby V2 Migration Workspace/Backup/MT/public/render-page.js:30:30

  - render-page.js:129 Object../.cache/api-runner-browser.js
    D:/Workspace/Gatsby V2 Migration Workspace/Backup/MT/public/render-page.js:129:15

  - render-page.js:30 __webpack_require__
    D:/Workspace/Gatsby V2 Migration Workspace/Backup/MT/public/render-page.js:30:30

  - render-page.js:1252 Module../.cache/page-renderer.js
    D:/Workspace/Gatsby V2 Migration Workspace/Backup/MT/public/render-page.js:1252:77

  - render-page.js:30 __webpack_require__
    D:/Workspace/Gatsby V2 Migration Workspace/Backup/MT/public/render-page.js:30:30

  - render-page.js:703 Module../.cache/json-store.js
    D:/Workspace/Gatsby V2 Migration Workspace/Backup/MT/public/render-page.js:703:72

  - render-page.js:30 __webpack_require__
    D:/Workspace/Gatsby V2 Migration Workspace/Backup/MT/public/render-page.js:30:30

  - render-page.js:1473 Module../.cache/public-page-renderer-dev.js
    D:/Workspace/Gatsby V2 Migration Workspace/Backup/MT/public/render-page.js:1473:69

  - render-page.js:30 __webpack_require__
    D:/Workspace/Gatsby V2 Migration Workspace/Backup/MT/public/render-page.js:30:30

  - render-page.js:1511 Object../.cache/public-page-renderer.js
    D:/Workspace/Gatsby V2 Migration Workspace/Backup/MT/public/render-page.js:1511:34

  - render-page.js:30 __webpack_require__
    D:/Workspace/Gatsby V2 Migration Workspace/Backup/MT/public/render-page.js:30:30


error UNHANDLED REJECTION


  ReferenceError: window is not defined

  - render-page.js:30357 Object../node_modules/picturefill/dist/picturefill.js
    D:/Workspace/Gatsby V2 Migration Workspace/Backup/MT/public/render-page.js:30357:4

  - render-page.js:30 __webpack_require__
    D:/Workspace/Gatsby V2 Migration Workspace/Backup/MT/public/render-page.js:30:30

  - render-page.js:1680 Object../gatsby-browser.js
    D:/Workspace/Gatsby V2 Migration Workspace/Backup/MT/public/render-page.js:1680:19

  - render-page.js:30 __webpack_require__
    D:/Workspace/Gatsby V2 Migration Workspace/Backup/MT/public/render-page.js:30:30

  - render-page.js:112 Object../.cache/api-runner-browser-plugins.js
    D:/Workspace/Gatsby V2 Migration Workspace/Backup/MT/public/render-page.js:112:11

  - render-page.js:30 __webpack_require__
    D:/Workspace/Gatsby V2 Migration Workspace/Backup/MT/public/render-page.js:30:30

  - render-page.js:129 Object../.cache/api-runner-browser.js
    D:/Workspace/Gatsby V2 Migration Workspace/Backup/MT/public/render-page.js:129:15

  - render-page.js:30 __webpack_require__
    D:/Workspace/Gatsby V2 Migration Workspace/Backup/MT/public/render-page.js:30:30

  - render-page.js:1252 Module../.cache/page-renderer.js
    D:/Workspace/Gatsby V2 Migration Workspace/Backup/MT/public/render-page.js:1252:77

  - render-page.js:30 __webpack_require__
    D:/Workspace/Gatsby V2 Migration Workspace/Backup/MT/public/render-page.js:30:30

  - render-page.js:703 Module../.cache/json-store.js
    D:/Workspace/Gatsby V2 Migration Workspace/Backup/MT/public/render-page.js:703:72

  - render-page.js:30 __webpack_require__
    D:/Workspace/Gatsby V2 Migration Workspace/Backup/MT/public/render-page.js:30:30

  - render-page.js:1473 Module../.cache/public-page-renderer-dev.js
    D:/Workspace/Gatsby V2 Migration Workspace/Backup/MT/public/render-page.js:1473:69

  - render-page.js:30 __webpack_require__
    D:/Workspace/Gatsby V2 Migration Workspace/Backup/MT/public/render-page.js:30:30

  - render-page.js:1511 Object../.cache/public-page-renderer.js
    D:/Workspace/Gatsby V2 Migration Workspace/Backup/MT/public/render-page.js:1511:34

  - render-page.js:30 __webpack_require__
    D:/Workspace/Gatsby V2 Migration Workspace/Backup/MT/public/render-page.js:30:30

Environment (if relevant)

System:
OS: Windows 10
CPU: x64 Intel(R) Core(TM) i5-7200U CPU @ 2.50GHz
Binaries:
Yarn: 1.7.0 - C:\Program Files (x86)\Yarn\bin\yarn.CMD
npm: 5.6.0 - C:\Program Files\nodejsnpm.CMD
Browsers:
Edge: 41.16299.248.0
npmPackages:
gatsby: ^2.0.0-beta.98 => 2.0.0-beta.98
gatsby-image: ^1.0.55 => 1.0.55
gatsby-link: ^2.0.0-beta.12 => 2.0.0-beta.17
gatsby-plugin-canonical-urls: ^1.0.18 => 1.0.18
gatsby-plugin-google-analytics: ^2.0.0-beta.4 => 2.0.0-beta.4
gatsby-plugin-google-tagmanager: ^1.0.19 => 1.0.19
gatsby-plugin-i18n: ^0.4.2 => 0.4.2
gatsby-plugin-manifest: ^2.0.2-beta.4 => 2.0.2-beta.4
gatsby-plugin-offline: ^2.0.0-beta.9 => 2.0.0-beta.9
gatsby-plugin-purify-css: ^2.2.1 => 2.2.1
gatsby-plugin-react-helmet: ^3.0.0-beta.4 => 3.0.0-beta.4
gatsby-plugin-robots-txt: ^1.3.0 => 1.3.0
gatsby-plugin-sharp: ^2.0.0-beta.7 => 2.0.0-beta.7
gatsby-plugin-sitemap: ^2.0.0-beta.3 => 2.0.0-beta.3
gatsby-source-contentful: ^2.0.1-beta.15 => 2.0.1-beta.15
gatsby-transformer-remark: ^2.1.1-beta.6 => 2.1.1-beta.6
gatsby-transformer-sharp: ^2.1.1-beta.6 => 2.1.1-beta.6

help wanted bug
Source
picture rtm619

All 9 comments

@rtm619 couldn't reproduce your error using the same gatsby-browser.js file and the using-remark example. Can you create a minimal reproduction repo showing your error?

Chuloo picture Chuloo on 13 Aug 2018

I'm gettting the same error on 'build' not on 'develop'. I'll share my 'reproducable example' later today if none has been shared by @rtm619 by then.

mishasaggi picture mishasaggi on 13 Aug 2018

Hi Chuloo, here's a repo based on the gatsby starter blog. https://github.com/rtm619/Test-Repo

rtm619 picture rtm619 on 14 Aug 2018
👍1

Thanks for the reproduction @rtm619. Got similar error on gatsby develop. Also threw a webpack error on gatsby build. 

success open and validate gatsby-config — 0.015 s
success load plugins — 0.600 s
success onPreInit — 2.325 s
success delete html and css files from previous builds — 0.123 s
success initialize cache — 0.080 s
success copy gatsby files — 0.302 s
success onPreBootstrap — 0.003 s
success source and transform nodes — 0.414 s
success building schema — 0.958 s
success createPages — 0.300 s
success createPagesStatefully — 0.202 s
success onPreExtractQueries — 0.006 s
success update schema — 0.519 s
warning Using the global `graphql` tag is deprecated, and will not be supported in v3.
Import it instead like:  import { graphql } from 'gatsby' in file:
/Users/talentpartnershipsassociate/Desktop/WORK/gatsby/bug-repro/gatsby-7270/src/templates/blog-post.js
success extract queries from components — 0.305 s
success run graphql queries — 1.074 s — 7/7 6.53 queries/second
success write out page data — 0.032 s
success write out redirect data — 0.016 s
success onPostBootstrap — 0.002 s

info bootstrap finished - 17.37 s

error UNHANDLED REJECTION


  ReferenceError: window is not defined

  - render-page.js:1693 Module../gatsby-browser.js
    /Users/talentpartnershipsassociate/Desktop/WORK/gatsby/bug-repro/gatsby-7270/public/render-page.js:1693:19

  - render-page.js:30 __webpack_require__
    /Users/talentpartnershipsassociate/Desktop/WORK/gatsby/bug-repro/gatsby-7270/public/render-page.js:30:30

  - render-page.js:117 Object../.cache/api-runner-browser-plugins.js
    /Users/talentpartnershipsassociate/Desktop/WORK/gatsby/bug-repro/gatsby-7270/public/render-page.js:117:11

  - render-page.js:30 __webpack_require__
    /Users/talentpartnershipsassociate/Desktop/WORK/gatsby/bug-repro/gatsby-7270/public/render-page.js:30:30

  - render-page.js:134 Object../.cache/api-runner-browser.js
    /Users/talentpartnershipsassociate/Desktop/WORK/gatsby/bug-repro/gatsby-7270/public/render-page.js:134:15

  - render-page.js:30 __webpack_require__
    /Users/talentpartnershipsassociate/Desktop/WORK/gatsby/bug-repro/gatsby-7270/public/render-page.js:30:30

  - render-page.js:1253 Module../.cache/page-renderer.js
    /Users/talentpartnershipsassociate/Desktop/WORK/gatsby/bug-repro/gatsby-7270/public/render-page.js:1253:77

  - render-page.js:30 __webpack_require__
    /Users/talentpartnershipsassociate/Desktop/WORK/gatsby/bug-repro/gatsby-7270/public/render-page.js:30:30

  - render-page.js:704 Module../.cache/json-store.js
    /Users/talentpartnershipsassociate/Desktop/WORK/gatsby/bug-repro/gatsby-7270/public/render-page.js:704:72

  - render-page.js:30 __webpack_require__
    /Users/talentpartnershipsassociate/Desktop/WORK/gatsby/bug-repro/gatsby-7270/public/render-page.js:30:30

  - render-page.js:1474 Module../.cache/public-page-renderer-dev.js
    /Users/talentpartnershipsassociate/Desktop/WORK/gatsby/bug-repro/gatsby-7270/public/render-page.js:1474:69

  - render-page.js:30 __webpack_require__
    /Users/talentpartnershipsassociate/Desktop/WORK/gatsby/bug-repro/gatsby-7270/public/render-page.js:30:30

  - render-page.js:1512 Object../.cache/public-page-renderer.js
    /Users/talentpartnershipsassociate/Desktop/WORK/gatsby/bug-repro/gatsby-7270/public/render-page.js:1512:34

  - render-page.js:30 __webpack_require__
    /Users/talentpartnershipsassociate/Desktop/WORK/gatsby/bug-repro/gatsby-7270/public/render-page.js:30:30

  - render-page.js:649 Module../.cache/gatsby-browser-entry.js
    /Users/talentpartnershipsassociate/Desktop/WORK/gatsby/bug-repro/gatsby-7270/public/render-page.js:649:79

  - render-page.js:30 __webpack_require__
    /Users/talentpartnershipsassociate/Desktop/WORK/gatsby/bug-repro/gatsby-7270/public/render-page.js:30:30

This question on Stack Overflow could explain why as the window object is not available in node.

Chuloo picture Chuloo on 14 Aug 2018

If I move this line https://github.com/rtm619/Test-Repo/blob/c421aaa9a0d1974664225da7095b0cade5e7af59/gatsby-browser.js#L25 into a shouldUpdateScroll function everything seems to work fine. Looks like window can only be used inside gatsby-browser API.

tryzniak picture tryzniak on 15 Aug 2018

@tryzniak it shouldn't work like that though. gatsby-browser.js shouldn't be included when SSRing the Gatsby site. We need to figure out why it is and correct that.

KyleAMathews picture KyleAMathews on 15 Aug 2018
👍1

Looks like I introduced this bug inadvertently in #7011. Sorry about that.
https://github.com/gatsbyjs/gatsby/blob/721fc25b4a29a7c4e4e0a7dd22f57cec18e4b5ca/packages/gatsby/src/bootstrap/index.js#L225

If I remove mentioned line gatsby develop works again. Tested on @rtm619 reproduction repo.

tryzniak picture tryzniak on 15 Aug 2018

@tryzniak your change is unrelated. Removing your change just means that gatsby-browser isn't added at all. The problem is that browser files shouldn't be added during SSR.

KyleAMathews picture KyleAMathews on 15 Aug 2018

Hi all,
Any updates on the issue?

rtm619 picture rtm619 on 20 Aug 2018
Was this page helpful?
0 / 5 - 0 ratings

Related issues

dustinhorton picture dustinhorton  ·  3Comments
jimfilippou picture jimfilippou  ·  3Comments
andykais picture andykais  ·  3Comments
timbrandin picture timbrandin  ·  3Comments
hobochild picture hobochild  ·  3Comments