Merge pull request #2627 from apollographql/remove-react-dom-dependency

Remove top-level react-dom/server import to fix #2592.

Changelog.md

@@ -2,6 +2,21 @@
 
 ## vNext
 
+## 2.3.2
+
+### Improvements
+
+### Bug Fixes
+
+- This package no longer imports `react-dom/server` unconditionally at the
+  top level, making `react-apollo` safer to use in environments like React
+  Native that are neither browser-like nor Node-like, and thus struggle to
+  import `react-dom/server` and its dependencies. Additionally, the React
+  Native bundler has been instructed to ignore all `react-dom/server`
+  dependencies within `react-apollo`, so `react-dom` will not be bundled
+  in React Native apps simply because they import `react-apollo`.
+  [PR #2627](https://github.com/apollographql/react-apollo/pull/2627)
+
 ## 2.3.1 (November 15, 2018)
 
 ### Improvements

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-apollo",
-  "version": "2.3.1",
+  "version": "2.3.2-beta.4",
   "author": "[email protected]",
   "private": true,
   "browser": "lib/react-apollo.browser.umd.js",
@@ -12,6 +12,9 @@
   ],
   "license": "MIT",
   "main": "lib/react-apollo.umd.js",
+  "react-native": {
+    "react-dom/server": false
+  },
   "module": "src/index.ts",
   "typings": "lib/index.d.ts",
   "repository": {

src/getDataFromTree.ts

@@ -1,6 +1,5 @@
 import * as React from 'react';
 import * as PropTypes from 'prop-types';
-import { renderToStaticMarkup } from 'react-dom/server';
 import Query from './Query';
 
 // Like a Set, but for tuples. In practice, this class is used to store
@@ -93,14 +92,14 @@ export default function getDataFromTree(
     context,
     // If you need to configure this renderFunction, call getMarkupFromTree
     // directly instead of getDataFromTree.
-    renderFunction: renderToStaticMarkup,
+    renderFunction: require("react-dom/server").renderToStaticMarkup,
   });
 }
 
 export type GetMarkupFromTreeOptions = {
   tree: React.ReactNode;
   context?: { [key: string]: any };
-  renderFunction?: typeof renderToStaticMarkup;
+  renderFunction?: (tree: React.ReactElement<any>) => string;
 };
 
 export function getMarkupFromTree({
@@ -109,7 +108,7 @@ export function getMarkupFromTree({
   // The rendering function is configurable! We use renderToStaticMarkup as
   // the default, because it's a little less expensive than renderToString,
   // and legacy usage of getDataFromTree ignores the return value anyway.
-  renderFunction = renderToStaticMarkup,
+  renderFunction = require("react-dom/server").renderToStaticMarkup,
 }: GetMarkupFromTreeOptions): Promise<string> {
   const renderPromises = new RenderPromises();
 

src/renderToStringWithData.ts

@@ -1,8 +1,9 @@
 import { ReactElement } from 'react';
-import * as ReactDOM from 'react-dom/server';
-
-import { default as getDataFromTree } from './getDataFromTree';
+import { getMarkupFromTree } from './getDataFromTree';
 
 export function renderToStringWithData(component: ReactElement<any>): Promise<string> {
-  return getDataFromTree(component).then(() => ReactDOM.renderToString(component));
+  return getMarkupFromTree({
+    tree: component,
+    renderFunction: require("react-dom/server").renderToString,
+  });
 }