localStorage is not defined when building Gatsby project

[danlutz]

When building an optimized production build of my gatsby app, i get an error saying "WebpackError: ReferenceError: localStorage is not defined".

Could be because of gotrue, but the error is happening when calling the hook. Is there a way to conditionally load it?

Great module btw! :)

[swyxio]

hey! thanks. not sure about how this works but its gonna be because localStorage is expected to be a global variable i.e. we are executing this in browser. so when you used it in gatsby you're probably using it inside Node.js and you need to do a window!==undefined check or something similar. get what i mean?

[danlutz]

Yes exactly! Problem is, you cannot conditionally call hooks, so we would need to do the window !== undefined check internally (and return a boilerplate/empty object while its undefined)

Would love to help you with this if you can point me in the right direction :)

[swyxio]

i see. go into your own node_modules, and try to modify these lines inside gotrue-js: https://github.com/netlify/gotrue-js/blob/86ee9894e4514d3fdc83208f3152d8311a6da297/src/user.js#L21-L29 to add the localStorage !== undefined check. if that works you can PR it into gotrue-js and i will update react-netlify-identity as well

[danlutz]

I just created a pull request, checking for window to be defined was working when creating a Gatbsy build on my machine 😃

Thanks for the guidance!

https://github.com/netlify/gotrue-js/pull/48

[swyxio]

cool.

[danlutz]

Will you release a new version with the bumped gotrue-js dependency? :)

[swyxio]

yup i commented in the PR: https://github.com/netlify/gotrue-js/pull/48#issuecomment-485678788

EDIT: oh sorry i just realized you mean react-netlify-identity. yeah i'll do that now.

[swyxio]

react-netlify-identity@0.0.10

[danlutz]

Nice, works as expected!