gatsby build / lazysizes/ Error: window is not defined

Created on 12 Sep 2017  路  2Comments  路  Source: gatsbyjs/gatsby

Hello, I'm using the package lazysizes https://github.com/aFarkas/lazysizes in the index page of my gatsby website. It works well in development but when I try a production with gatsby build, I got Error: window is not defined.
I tried to put in the render this: window.lazySizesConfig = window.lazySizesConfig || {}; but it didn't solve it. Anyone has an idea how to make it? Which plugin would you recommend to lazy-load images with Gatsby ?
Thanks!

Error: 
    Error: window is not defined

    - render-page.js:44516   Object.exports.__esModule
      render-page.js:44516:4

    - render-page.js:30 __w  ebpack_require__
      render-page.js:30:30

    - render-page.js:44410   Object.<anonymous>
      render-page.js:44410:19

    - render-page.js:30 __w  ebpack_require__
      render-page.js:30:30

    - render-page.js:42355   Object.exports.__esModule
      render-page.js:42355:52

    - render-page.js:30 __w  ebpack_require__
      render-page.js:30:30

    - render-page.js:79 Obj  ect.<anonymous>
      render-page.js:79:22

    - render-page.js:30 __w  ebpack_require__
      render-page.js:30:30

    - render-page.js:50 Obj  ect.assign.i
      render-page.js:50:18

    - render-page.js:53 
      render-page.js:53:10

Most helpful comment

@jquense Thanks to remind me the link!
I solved it by adding this function in gatsby-node.js:

exports.modifyWebpackConfig = ({ config, stage }) => {
  if (stage === 'build-html') {
    config.loader('null', {
      test: /lazysizes/,
      loader: 'null-loader'
    })
  }
}

All 2 comments

Hi there, windows objects aren't available during the server side build because it's not a browser. You should follow the guidelines from react for "server side rendering" here. Also please see the link in the error it explains a bit how to adjust the code to work once you've found it

@jquense Thanks to remind me the link!
I solved it by adding this function in gatsby-node.js:

exports.modifyWebpackConfig = ({ config, stage }) => {
  if (stage === 'build-html') {
    config.loader('null', {
      test: /lazysizes/,
      loader: 'null-loader'
    })
  }
}
Was this page helpful?
0 / 5 - 0 ratings

Related issues

totsteps picture totsteps  路  3Comments

Oppenheimer1 picture Oppenheimer1  路  3Comments

hobochild picture hobochild  路  3Comments

theduke picture theduke  路  3Comments

rossPatton picture rossPatton  路  3Comments