diff --git a/packages/react-error-overlay/package.json b/packages/react-error-overlay/package.json
index ba4676c4a77..983917d064b 100644
--- a/packages/react-error-overlay/package.json
+++ b/packages/react-error-overlay/package.json
@@ -35,6 +35,7 @@
"babel-code-frame": "6.22.0",
"babel-runtime": "6.26.0",
"html-entities": "1.2.1",
+ "object-assign": "^4.1.1",
"react": "^15 || ^16",
"react-dom": "^15 || ^16",
"settle-promise": "1.0.0",
diff --git a/packages/react-error-overlay/src/components/CodeBlock.js b/packages/react-error-overlay/src/components/CodeBlock.js
index 478f0111b9b..5ed934f9f25 100644
--- a/packages/react-error-overlay/src/components/CodeBlock.js
+++ b/packages/react-error-overlay/src/components/CodeBlock.js
@@ -9,6 +9,7 @@
/* @flow */
import React from 'react';
+import assign from 'object-assign';
import { redTransparent, yellowTransparent } from '../styles';
const _preStyle = {
@@ -21,15 +22,13 @@ const _preStyle = {
borderRadius: '0.25rem',
};
-const primaryPreStyle = {
- ..._preStyle,
+const primaryPreStyle = assign({}, _preStyle, {
backgroundColor: redTransparent,
-};
+});
-const secondaryPreStyle = {
- ..._preStyle,
+const secondaryPreStyle = assign({}, _preStyle, {
backgroundColor: yellowTransparent,
-};
+});
const codeStyle = {
fontFamily: 'Consolas, Menlo, monospace',
diff --git a/packages/react-error-overlay/src/components/Collapsible.js b/packages/react-error-overlay/src/components/Collapsible.js
index 92f1de4295c..1997cba1865 100644
--- a/packages/react-error-overlay/src/components/Collapsible.js
+++ b/packages/react-error-overlay/src/components/Collapsible.js
@@ -9,6 +9,7 @@
/* @flow */
import React, { Component } from 'react';
+import assign from 'object-assign';
import { black } from '../styles';
const _collapsibleStyle = {
@@ -25,15 +26,13 @@ const _collapsibleStyle = {
lineHeight: '1.5',
};
-const collapsibleCollapsedStyle = {
- ..._collapsibleStyle,
+const collapsibleCollapsedStyle = assign({}, _collapsibleStyle, {
marginBottom: '1.5em',
-};
+});
-const collapsibleExpandedStyle = {
- ..._collapsibleStyle,
+const collapsibleExpandedStyle = assign({}, _collapsibleStyle, {
marginBottom: '0.6em',
-};
+});
class Collapsible extends Component {
state = {
diff --git a/packages/react-error-overlay/src/components/NavigationBar.js b/packages/react-error-overlay/src/components/NavigationBar.js
index 4eba743cef7..a5506dcf711 100644
--- a/packages/react-error-overlay/src/components/NavigationBar.js
+++ b/packages/react-error-overlay/src/components/NavigationBar.js
@@ -9,6 +9,7 @@
/* @flow */
import React from 'react';
+import assign from 'object-assign';
import { red, redTransparent } from '../styles';
const navigationBarStyle = {
@@ -28,18 +29,16 @@ const _navButtonStyle = {
cursor: 'pointer',
};
-const leftButtonStyle = {
- ..._navButtonStyle,
+const leftButtonStyle = assign({}, _navButtonStyle, {
borderTopRightRadius: '0px',
borderBottomRightRadius: '0px',
marginRight: '1px',
-};
+});
-const rightButtonStyle = {
- ..._navButtonStyle,
+const rightButtonStyle = assign({}, _navButtonStyle, {
borderTopLeftRadius: '0px',
borderBottomLeftRadius: '0px',
-};
+});
type Callback = () => void;
diff --git a/packages/react-error-overlay/src/containers/StackFrame.js b/packages/react-error-overlay/src/containers/StackFrame.js
index c95ce003f49..6485d39fab9 100644
--- a/packages/react-error-overlay/src/containers/StackFrame.js
+++ b/packages/react-error-overlay/src/containers/StackFrame.js
@@ -174,7 +174,9 @@ class StackFrame extends Component {
onClick={canOpenInEditor ? this.openInEditor : null}
style={canOpenInEditor ? codeAnchorStyle : null}
>
-
+ {// Use JS instead of JSX spread attributes to avoid Object.assign
+ // in transpiled code which haven't pollyfilled at this point
+ React.createElement(CodeBlock, codeBlockProps)}