OverlayContainer createPortal when document is ready (#3186)

Author: Naoki Kobayashi

packages/@react-aria/overlays/package.json

@@ -20,6 +20,7 @@
     "@babel/runtime": "^7.6.2",
     "@react-aria/i18n": "^3.4.1",
     "@react-aria/interactions": "^3.9.1",
+    "@react-aria/ssr": "^3.2.0",
     "@react-aria/utils": "^3.13.1",
     "@react-aria/visually-hidden": "^3.3.1",
     "@react-stately/overlays": "^3.3.1",

packages/@react-aria/overlays/src/useModal.tsx

@@ -12,6 +12,7 @@
 
 import React, {AriaAttributes, HTMLAttributes, ReactNode, useContext, useEffect, useMemo, useState} from 'react';
 import ReactDOM from 'react-dom';
+import {useIsSSR} from '@react-aria/ssr';
 
 interface ModalProviderProps extends HTMLAttributes<HTMLElement> {
   children: ReactNode
@@ -122,14 +123,19 @@ interface OverlayContainerProps extends ModalProviderProps {
  * be accessible at once.
  */
 export function OverlayContainer(props: OverlayContainerProps): React.ReactPortal {
-  let {portalContainer = document.body, ...rest} = props;
+  let isSSR = useIsSSR();
+  let {portalContainer = isSSR ? null : document.body, ...rest} = props;
 
   React.useEffect(() => {
-    if (portalContainer.closest('[data-overlay-container]')) {
+    if (portalContainer?.closest('[data-overlay-container]')) {
       throw new Error('An OverlayContainer must not be inside another container. Please change the portalContainer prop.');
     }
   }, [portalContainer]);
 
+  if (!portalContainer) {
+    return null;
+  }
+
   let contents = <OverlayProvider {...rest} />;
   return ReactDOM.createPortal(contents, portalContainer);
 }

packages/@react-aria/overlays/test/useModal.ssr.test.js

@@ -0,0 +1,28 @@
+/*
+ * Copyright 2020 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+import {testSSR} from '@react-spectrum/test-utils';
+
+describe('OverlayContainer SSR', function () {
+  it('should render without errors', async function () {
+    await testSSR(__filename, `
+      import {OverlayContainer, OverlayProvider} from '..';
+      import React from 'react';
+
+      <OverlayProvider data-testid="root-provider">
+        <OverlayContainer data-testid="modal-provider">
+          <div data-testid="modal"></div>
+        </OverlayContainer>
+      </OverlayProvider>
+    `);
+  });
+});