support server side rendering

[meikidd]

Thank you @alexkatz for making this awesome package.

I am currently migrating my frontend project to server side rendering project. These few lines change can make this package work on server side.

It would be super cool if you can review and merge this PR.

[chrisvariety]

would love to see this merged, seeing the same issue.

[alexkatz]

Closing this, as the PR violates a basic principle of hooks.

[chrisvariety]

@alexkatz which principle?

[alexkatz]

Hooks cannot be called conditionally. React relies on the same number of hooks within a component being called in the same order every render, in order to keep track of them.

An early return statement based on a particular condition means that every hook to follow is called conditionally. This will break your app.

[alexkatz]

In regard to server side rendering, I recommend creating an HOC that handles it. It can look something like this:

const SafePopover: FC<PopoverProps> = props => {
  if (typeof window === 'undefined') return props.children;
  return <Popover {...props} />;
};

[chrisvariety]

SSR isn't conditional though, does not violate the principle you have cited.

[GusRuss89]

@alexkatz why not export SafePopover as the default export from this library? As of now, anyone using this library in Next.js will google the error and end up at #118 which doesn't currently include an answer for this question. Next.js is popular, you're probably losing a lot of users.