SSR support?

[alexstrat]

As of version 6.0.5, react-tiny-popover does not work properly with SSR (see #105).

Example with NextJS:

Server Error
ReferenceError: window is not defined

This error happened while generating the page. Any console logs will be displayed in the terminal window.
Call Stack
Object.render
node_modules/react-tiny-popover/dist/Popover.js (34:417)

It looks like in #21 there was some willingness to make the lib SSR compatible.

[meikidd]

108 this is the PR for SSR in v6, it's not merged yet

[gregg-cbs]

Thanks @alexstrat and @meikidd I am also experiencing this. ServerSide rendering is the curse that keeps cursing.

@alexkatz Any plans to merge the PR?

[gregg-cbs]

I tried a wrapper which unfortunately does not work, get an error: Warning: Expected server HTML to contain a matching <div> in <div>.

Wrapper:

import {Popover as ReactPopover} from "react-tiny-popover"

function Popover({children, ...bindProps}) {
  if (typeof window === 'undefined') return null;
  return (
    <ReactPopover
      {...bindProps}
    >
      {children}
    </ReactPopover>
  )
}

export default Popover

[FrancisCalizo]

Same issue here. Replying to follow thread.

[benjaminbaldoni]

Same error here. Did someone found a workaround? Tried using the containerParent property but still having the error.

[gregg-cbs]

I ended up using React Material UI which has popover in it for anyone who needs a decent popover. Its not tiny per say but its good.

[rchrd2]

I took @meikidd's fork and made it installable... yarn add https://github.com/rchrd2/react-tiny-popover

[bolam-o]

I took @meikidd's fork and made it installable... yarn add https://github.com/rchrd2/react-tiny-popover

@rchrd2 Your module cannot be installed on Windows.😥

C:\project\ex-drive>yarn add https://github.com/rchrd2/react-tiny-popover
yarn add v1.22.4
warning package-lock.json found. Your project contains lock files generated by tools other than Yarn. It is advised not to mix package managers in order to avoid resolution inconsistencies caused by unsynchronized lock files. To clear this warning, remove package-lock.json.
[1/4] Resolving packages...
[2/4] Fetching packages...
[1/4] Resolving packages...
[2/4] Fetching packages...
[3/4] Linking dependencies...
warning "eslint-config-airbnb-typescript > eslint-config-airbnb@18.1.0" has incorrect peer dependency "eslint-plugin-react-hooks@^2.5.0 || ^1.7.0".
warning " > eslint-config-react-app@5.2.1" has incorrect peer dependency "eslint-plugin-react-hooks@1.x || 2.x".
warning " > eslint-plugin-redux-saga@1.2.0" has unmet peer dependency "redux-saga@>= 0.11.1 < 1 || >= 1.0.0".
[4/4] Building fresh packages...
$ yarn run build
yarn run v1.22.4
$ tsc -p . && yarn copy-types
$ cp src/index.d.ts dist/index.d.ts
'cp' is an internal or external command, operable program, or
It's not a batch file.

[gregg-cbs]

@rchrd2 you are doing a yarn install instead of a npm install. Thats why you are seeing that error.

[Hubro]

No SSR support means this library can't be used in any project based on Next.js, since automatic SSR is a core feature. Trying to use this library immediately crashes the server with:

ReferenceError: window is not defined

[GusRuss89]

To anyone arriving here from Google, here's what you should do until SSR is officially supported.

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

Or if you're not using TypeScript:

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

Import and use SafePopover wherever you'd normally use Popover.

Taken from https://github.com/alexkatz/react-tiny-popover/pull/108?_pjax=%23js-repo-pjax-container#issuecomment-891333376

[Hubro]

@GusRuss89 That seems like it will definitely produce a warning in Next.js, since it looks like SSR and the local client will produce different HTML. :frowning_face:

[panayi]

A workaround until SSR is supported:

import dynamic from 'next/dynamic';

const Popover = dynamic(
  () => import('react-tiny-popover').then(mod => mod.Popover),
  { ssr: false }
)

[alexkatz]

I've released 7.0.0, which now has SSR support, among other things. I'll close this for now, but feel welcome to post any more issues you come across! Thanks guys.