The Dialog/Modal reports an error when used with next.js

[firede]

Describe the bug

The Dialog/Modal reports an error when used with next.js.

To Reproduce

1. Go to https://y92q9.sse.codesandbox.io/
2. Open Chrome DevTools Console
3. See error (Screenshots below)

Code: https://codesandbox.io/s/bumbag-dialog-issue-y92q9?file=/components/TestDialog.tsx

import React from "react";
import { Modal, Button, Card, Box } from "bumbag";

const TestDialog = () => {
  return (
    <Modal.State>
      <Modal.Disclosure use={Button}>Open modal</Modal.Disclosure>
      <Modal>
        <Card>
          <Box>Hello world</Box>
          <Modal.Disclosure use={Button}>Close</Modal.Disclosure>
        </Card>
      </Modal>
    </Modal.State>
  );
};

export default TestDialog;

Expected behavior

Screenshots

Device information (please complete the following information):

• Device: Macbook Pro
• OS, version: macOS 10.15.6
• Browser, version: Chrome 84.0.4147.125

Additional context

[firede]

Update

This issue is caused by Portal:

https://github.com/bumbag/bumbag-ui/blob/4f8bca3dec3e73771d5ac51fc62fb36480ebad08/packages/bumbag/src/Portal/Portal.tsx#L32-L37

I think we should return null if it is server-side rendering.

ref: https://github.com/vercel/next.js/blob/canary/examples/with-portals/components/ClientOnlyPortal.js

[b-gibbs]

I'm running into this, too.