SSR gives me ReferenceError: window is not defined

[asundlihardig]

I'm using react-visibility-sensor 5.0.1 with NextJS 7.0.2

[nirpeled]

Same here

[junkiemonkey]

Same bug

[saeta-eth]

+1

[joshwnj]

Hi @asundlihardig thanks for the report. Could you & others here please confirm whether it's fixed by #140 ?

[Falieson]

@asundlihardig I had trouble trying to just npm install from the PR (I don't think the lib is updated). I merged #140 onto my fork and pushed it under my org (https://github.com/TGRstack/react-visibility-sensor) to npm, you can try installing the branch with npm i -S @tgrx/react-visibility-sensor

this fixed my issue w/ Gatsby

[joshwnj]

Thanks @Falieson

While we're here, would anyone in this thread be willing to help make a quick demo repo using Gatsby or Next?

As mentioned in #128 I'm hoping to get a group of demos together that represent how people are using this component in production. Moving forward, only features that are covered by Demos will be considered "officially supported", and others may be deprecated.

[hlolli]

+1

[joshwnj]

Hi @hlolli , is that a "+1" to say that you're experiencing the issue as well, or confirming that the PR resolves it for you? (or both? :) )

[hlolli]

@joshwnj I'm as we speak testing the PR from @Falieson, it works non-ssr, but not ssr, I'm getting runtime react error and it wont show me any stacktrace with minified react. So I'm trying to track down the bug and rule out if it's on my side. Will either edit this post or post about if it works or not!

[hlolli]

@joshwnj the PR fixes my problem. I was at the same time bumping react which caused mismatch of a newline. Was an easy fix on my side fully unrelated to the visibility sensor!

[joshwnj]

@hlolli cool, thanks! 🎉

[joshwnj]

I've published the fix at v5.0.2

[edorivai]

Just leaving this here for future googlers:

We were having problems with one of our code-split components staying in loading state at SSR. So we basically had an entire page which would always render Loading... for the SSR pass (the client render would work without any problems). We're using https://github.com/faceyspacey/react-universal-component for our code split + SSR setup.

There's a whole lot going on on the page that was failing, but merely commenting out <VisibilitySensor> got rid of the loading state.

Sadly universal-component was not logging any errors or anything which made it quite hard to track down.

In the end, upgrading to 5.0.2 of this package fixed the issue :tada:

[asundlihardig]

Hi @joshwnj Sorry for not responding to this before, but I have been traveling.

5.0.2 fixed the issue. Thanks a lot! ✌🏻

We are using react-visibility-sensor in a Next.js project hosted on Heroku.

Currently we have two usecases:

1. Lazyloading a static map
2. GA tracking an element when partially viewed.

Let me know if you want me to join #128

[joshwnj]

@asundlihardig no worries, glad to hear it's sorted :)

1. Lazyloading a static map
2. GA tracking an element when partially viewed.

Both of these sound extremely relevant for #128 . And adding some Demos for these will ensure that the features you're depending on continue to be supported, and gain priority for performance improvements etc.

In most cases the best option seems to be to make a CodeSandbox project (you can fork the one here if you like https://codesandbox.io/s/p73kyx9zpm). Let me know if there's any way I can help :)

[joshwnj]

Just leaving this here for future googlers

Thanks @edorivai , on behalf of the future googlers :)