From bb809d156e6bec8b49b7ae0681f058e83cdbd24d Mon Sep 17 00:00:00 2001
From: "Kent C. Dodds" <kent@doddsfamily.us>
Date: Thu, 4 Oct 2018 16:32:13 -0600
Subject: [PATCH] fix react-dom imports

react-dom does not use named exports and when rollup attempts to bundle
these files it gives the following error:

```
[!] Error: 'render' is not exported by ../../node_modules/react-dom/index.js
https://github.com/rollup/rollup/wiki/Troubleshooting#name-is-not-exported-by-module
node_modules/@reach/alert/es/index.js (19:9)
17:
18: import React from "react";
19: import { render } from "react-dom";
             ^
20: import Component from "@reach/component-component";
21: import VisuallyHidden from "@reach/visually-hidden";
```
---
 packages/alert-dialog/src/index.js                         | 4 ++--
 packages/alert/src/index.js                                | 4 ++--
 packages/component-component/examples/todo-list.example.js | 6 +++---
 packages/menu-button/src/index.js                          | 4 ++--
 packages/portal/src/index.js                               | 4 ++--
 packages/utils/src/lib/IdContext.js                        | 4 ++--
 6 files changed, 13 insertions(+), 13 deletions(-)

diff --git a/packages/alert-dialog/src/index.js b/packages/alert-dialog/src/index.js
index 799e84b17..d41021b0d 100644
--- a/packages/alert-dialog/src/index.js
+++ b/packages/alert-dialog/src/index.js
@@ -1,10 +1,10 @@
-import React, { createContext, forwardRef } from "react";
+import React from "react";
 import Component from "@reach/component-component";
 import { DialogOverlay, DialogContent } from "@reach/dialog";
 import { Consumer as IdConsumer } from "@reach/utils/lib/IdContext";
 import invariant from "invariant";
 
-let AlertDialogContext = createContext();
+let AlertDialogContext = React.createContext();
 
 let AlertDialogOverlay = ({ leastDestructiveRef, ...props }) => (
   <IdConsumer>
diff --git a/packages/alert/src/index.js b/packages/alert/src/index.js
index e658d41d1..cb1d2fe4d 100644
--- a/packages/alert/src/index.js
+++ b/packages/alert/src/index.js
@@ -12,7 +12,7 @@
 // later.
 
 import React from "react";
-import { render } from "react-dom";
+import ReactDOM from "react-dom";
 import Component from "@reach/component-component";
 import VisuallyHidden from "@reach/visually-hidden";
 
@@ -42,7 +42,7 @@ let renderAlerts = () => {
     Object.keys(elements).forEach(type => {
       let container = liveRegions[type];
       if (container) {
-        render(
+        ReactDOM.render(
           <VisuallyHidden>
             <div
               role={type === "assertive" ? "alert" : "status"}
diff --git a/packages/component-component/examples/todo-list.example.js b/packages/component-component/examples/todo-list.example.js
index 71bbef260..f7b3394c3 100644
--- a/packages/component-component/examples/todo-list.example.js
+++ b/packages/component-component/examples/todo-list.example.js
@@ -1,4 +1,4 @@
-import React, { Fragment } from "react";
+import React from "react";
 import Component from "../src/index";
 
 export let name = "Kitchen Sink Todo List";
@@ -15,7 +15,7 @@ export let Example = () => (
     })}
   >
     {({ state, setState, refs }) => (
-      <Fragment>
+      <React.Fragment>
         <Component
           didUpdate={() =>
             localStorage.setItem("todos", JSON.stringify(state.todos))
@@ -70,7 +70,7 @@ export let Example = () => (
             </button>
           </p>
         </div>
-      </Fragment>
+      </React.Fragment>
     )}
   </Component>
 );
diff --git a/packages/menu-button/src/index.js b/packages/menu-button/src/index.js
index 4c6333716..aa36169a6 100644
--- a/packages/menu-button/src/index.js
+++ b/packages/menu-button/src/index.js
@@ -1,4 +1,4 @@
-import React, { createContext } from "react";
+import React from "react";
 import Portal from "@reach/portal";
 import { Link } from "@reach/router";
 import Rect from "@reach/rect";
@@ -7,7 +7,7 @@ import Component from "@reach/component-component";
 import { node, func, object, string, number, oneOfType } from "prop-types";
 import { wrapEvent, checkStyles } from "@reach/utils";
 
-let { Provider, Consumer } = createContext();
+let { Provider, Consumer } = React.createContext();
 
 let checkIfAppManagedFocus = ({ refs, state, prevState }) => {
   if (!state.isOpen && prevState.isOpen) {
diff --git a/packages/portal/src/index.js b/packages/portal/src/index.js
index 9540b26bf..7fe9b336c 100644
--- a/packages/portal/src/index.js
+++ b/packages/portal/src/index.js
@@ -1,5 +1,5 @@
 import React from "react";
-import { createPortal } from "react-dom";
+import ReactDOM from "react-dom";
 import Component from "@reach/component-component";
 
 let Portal = ({ children, type = "reach-portal" }) => (
@@ -14,7 +14,7 @@ let Portal = ({ children, type = "reach-portal" }) => (
       document.body.removeChild(node);
     }}
     render={({ refs: { node } }) => {
-      return node ? createPortal(children, node) : null;
+      return node ? ReactDOM.createPortal(children, node) : null;
     }}
   />
 );
diff --git a/packages/utils/src/lib/IdContext.js b/packages/utils/src/lib/IdContext.js
index 755099084..17bb9b6ad 100644
--- a/packages/utils/src/lib/IdContext.js
+++ b/packages/utils/src/lib/IdContext.js
@@ -1,4 +1,4 @@
-import React, { createContext } from "react";
+import React from "react";
 
 // most things that we auto-id aren't server rendered, and are rendered into
 // portals anyway, so we can get away with random ids in a default context. If
@@ -9,7 +9,7 @@ let genId = () =>
     .toString(32)
     .substr(2, 6);
 
-let IdContext = createContext(genId);
+let IdContext = React.createContext(genId);
 
 // Apps can wrap their app in this to get the same IDs on the server and the
 // client