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
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'
})
}
}
Most helpful comment
@jquense Thanks to remind me the link!
I solved it by adding this function in gatsby-node.js: