From 58c9f6e6b9c77f26795e47a485252fd875eb0bdb Mon Sep 17 00:00:00 2001 From: Ben Newman Date: Tue, 27 Nov 2018 15:42:39 -0500 Subject: [PATCH 1/3] Remove top-level react-dom/server import to fix #2592. Supersedes #2593. Should fix #2592. By pushing the react-dom/server import down into the relevant functions that need it, we can avoid unconditionally importing that dependency tree, which helps in environments like React Native where react-dom/server either doesn't work or seems undesirable (see discussion in #2592). Since the React Native bundler will still try to traverse the require("react-dom/server") dependencies, it's important to prune that dependency with a "react-native": { "react-dom/server": false } section in react-apollo/package.json. Note that this does not prevent React Native apps from using getMarkupFromTree with an appropriate renderFunction; it simply prevents React Native's bundler from bundling the react-dom/server dependency just because react-apollo is imported. Tested with both react-native@0.55.4 and @0.57.7 (Expo SDKs 30 and 31). --- package.json | 3 +++ src/getDataFromTree.ts | 7 +++---- src/renderToStringWithData.ts | 9 +++++---- 3 files changed, 11 insertions(+), 8 deletions(-) diff --git a/package.json b/package.json index a1ee3c0e8a..14effb8e1b 100644 --- a/package.json +++ b/package.json @@ -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": { diff --git a/src/getDataFromTree.ts b/src/getDataFromTree.ts index 6745fe8b66..b76d0371c5 100755 --- a/src/getDataFromTree.ts +++ b/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) => 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 { const renderPromises = new RenderPromises(); diff --git a/src/renderToStringWithData.ts b/src/renderToStringWithData.ts index f373ff93b7..647939c592 100755 --- a/src/renderToStringWithData.ts +++ b/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): Promise { - return getDataFromTree(component).then(() => ReactDOM.renderToString(component)); + return getMarkupFromTree({ + tree: component, + renderFunction: require("react-dom/server").renderToString, + }); } From 2f6a19f23e0cb951ae43bb48882d892c1ff8aa20 Mon Sep 17 00:00:00 2001 From: Ben Newman Date: Tue, 27 Nov 2018 15:54:05 -0500 Subject: [PATCH 2/3] Bump react-apollo to version 2.3.2-beta.4. --- package-lock.json | 2 +- package.json | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/package-lock.json b/package-lock.json index f2772be037..29905a4d05 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,6 +1,6 @@ { "name": "react-apollo", - "version": "2.3.1", + "version": "2.3.2-beta.4", "lockfileVersion": 1, "requires": true, "dependencies": { diff --git a/package.json b/package.json index 14effb8e1b..4649f6c684 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "react-apollo", - "version": "2.3.1", + "version": "2.3.2-beta.4", "author": "opensource@apollographql.com", "private": true, "browser": "lib/react-apollo.browser.umd.js", From 07588e92ff929d4317558a4c17617cdd189c5cee Mon Sep 17 00:00:00 2001 From: Ben Newman Date: Tue, 27 Nov 2018 16:14:09 -0500 Subject: [PATCH 3/3] Start a section for version 2.3.2 in Changelog.md. --- Changelog.md | 15 +++++++++++++++ 1 file changed, 15 insertions(+) diff --git a/Changelog.md b/Changelog.md index 956948efcc..a207547614 100644 --- a/Changelog.md +++ b/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