From 7806ee541319c628a6cb8790a9349b63acf67619 Mon Sep 17 00:00:00 2001 From: Dan Abramov Date: Wed, 2 Aug 2017 16:44:12 +0100 Subject: [PATCH 1/4] Crash on missing Set/Map polyfills --- src/renderers/dom/fiber/ReactDOMFiberEntry.js | 16 ++++++++++++++++ src/renderers/shared/ReactDOMFrameScheduling.js | 2 +- 2 files changed, 17 insertions(+), 1 deletion(-) diff --git a/src/renderers/dom/fiber/ReactDOMFiberEntry.js b/src/renderers/dom/fiber/ReactDOMFiberEntry.js index 09c180f2522c8..44ba961c0b11f 100644 --- a/src/renderers/dom/fiber/ReactDOMFiberEntry.js +++ b/src/renderers/dom/fiber/ReactDOMFiberEntry.js @@ -64,6 +64,22 @@ if (__DEV__) { var {updatedAncestorInfo} = validateDOMNesting; } +if ( + typeof Map !== 'function' || + Map.prototype == null || + typeof Map.prototype.forEach !== 'function' || + typeof Set !== 'function' || + Set.prototype == null || + typeof Set.prototype.clear !== 'function' || + typeof Set.prototype.forEach !== 'function' +) { + invariant( + false, + 'React depends on Map and Set built-in types. Make sure that you load a ' + + 'polyfill in older browsers. http://fb.me/react-polyfills', + ); +} + require('ReactDOMClientInjection'); require('ReactDOMInjection'); ReactControlledComponent.injection.injectFiberControlledHostComponent( diff --git a/src/renderers/shared/ReactDOMFrameScheduling.js b/src/renderers/shared/ReactDOMFrameScheduling.js index f519b099f1c1c..9eb85bd0a2089 100644 --- a/src/renderers/shared/ReactDOMFrameScheduling.js +++ b/src/renderers/shared/ReactDOMFrameScheduling.js @@ -43,7 +43,7 @@ if (!ExecutionEnvironment.canUseDOM) { invariant( false, 'React depends on requestAnimationFrame. Make sure that you load a ' + - 'polyfill in older browsers.', + 'polyfill in older browsers. http://fb.me/react-polyfills', ); } else if (typeof requestIdleCallback !== 'function') { // Polyfill requestIdleCallback. From c7b3082b58e27824c154a16cc861aa5fe3a5350c Mon Sep 17 00:00:00 2001 From: Dan Abramov Date: Wed, 2 Aug 2017 17:48:42 +0100 Subject: [PATCH 2/4] Change Map/Set to emit warnings instead --- src/renderers/dom/fiber/ReactDOMFiberEntry.js | 30 +++++++++---------- 1 file changed, 15 insertions(+), 15 deletions(-) diff --git a/src/renderers/dom/fiber/ReactDOMFiberEntry.js b/src/renderers/dom/fiber/ReactDOMFiberEntry.js index 44ba961c0b11f..c114f1c7b2fdd 100644 --- a/src/renderers/dom/fiber/ReactDOMFiberEntry.js +++ b/src/renderers/dom/fiber/ReactDOMFiberEntry.js @@ -62,22 +62,22 @@ if (__DEV__) { var warning = require('fbjs/lib/warning'); var validateDOMNesting = require('validateDOMNesting'); var {updatedAncestorInfo} = validateDOMNesting; -} -if ( - typeof Map !== 'function' || - Map.prototype == null || - typeof Map.prototype.forEach !== 'function' || - typeof Set !== 'function' || - Set.prototype == null || - typeof Set.prototype.clear !== 'function' || - typeof Set.prototype.forEach !== 'function' -) { - invariant( - false, - 'React depends on Map and Set built-in types. Make sure that you load a ' + - 'polyfill in older browsers. http://fb.me/react-polyfills', - ); + if ( + typeof Map !== 'function' || + Map.prototype == null || + typeof Map.prototype.forEach !== 'function' || + typeof Set !== 'function' || + Set.prototype == null || + typeof Set.prototype.clear !== 'function' || + typeof Set.prototype.forEach !== 'function' + ) { + warning( + false, + 'React depends on Map and Set built-in types. Make sure that you load a ' + + 'polyfill in older browsers. http://fb.me/react-polyfills', + ); + } } require('ReactDOMClientInjection'); From 135ba546c71c998d20e6aafea2b753271b655c3d Mon Sep 17 00:00:00 2001 From: Dan Abramov Date: Wed, 2 Aug 2017 17:55:15 +0100 Subject: [PATCH 3/4] Change rAF polyfill check to also be a warning --- .../shared/ReactDOMFrameScheduling.js | 21 +++++++++++++------ .../__tests__/ReactDOMFrameScheduling-test.js | 12 +++++------ 2 files changed, 21 insertions(+), 12 deletions(-) diff --git a/src/renderers/shared/ReactDOMFrameScheduling.js b/src/renderers/shared/ReactDOMFrameScheduling.js index 9eb85bd0a2089..e3c39ffb56948 100644 --- a/src/renderers/shared/ReactDOMFrameScheduling.js +++ b/src/renderers/shared/ReactDOMFrameScheduling.js @@ -25,6 +25,21 @@ import type {Deadline} from 'ReactFiberReconciler'; var invariant = require('fbjs/lib/invariant'); var ExecutionEnvironment = require('fbjs/lib/ExecutionEnvironment'); +if (__DEV__) { + var warning = require('fbjs/lib/warning'); + + if ( + ExecutionEnvironment.canUseDOM && + typeof requestAnimationFrame !== 'function' + ) { + warning( + false, + 'React depends on requestAnimationFrame. Make sure that you load a ' + + 'polyfill in older browsers. http://fb.me/react-polyfills', + ); + } +} + // TODO: There's no way to cancel, because Fiber doesn't atm. let rIC: (callback: (deadline: Deadline) => void) => number; @@ -39,12 +54,6 @@ if (!ExecutionEnvironment.canUseDOM) { }); return 0; }; -} else if (typeof requestAnimationFrame !== 'function') { - invariant( - false, - 'React depends on requestAnimationFrame. Make sure that you load a ' + - 'polyfill in older browsers. http://fb.me/react-polyfills', - ); } else if (typeof requestIdleCallback !== 'function') { // Polyfill requestIdleCallback. diff --git a/src/renderers/shared/__tests__/ReactDOMFrameScheduling-test.js b/src/renderers/shared/__tests__/ReactDOMFrameScheduling-test.js index f08812005b294..7b6949ca12f1f 100644 --- a/src/renderers/shared/__tests__/ReactDOMFrameScheduling-test.js +++ b/src/renderers/shared/__tests__/ReactDOMFrameScheduling-test.js @@ -15,16 +15,16 @@ const ReactDOMFeatureFlags = require('ReactDOMFeatureFlags'); const describeFiber = ReactDOMFeatureFlags.useFiber ? describe : xdescribe; describeFiber('ReactDOMFrameScheduling', () => { - it('throws when requestAnimationFrame is not polyfilled in the browser', () => { + it('warns when requestAnimationFrame is not polyfilled in the browser', () => { const previousRAF = global.requestAnimationFrame; try { global.requestAnimationFrame = undefined; jest.resetModules(); - expect(() => { - require('react-dom'); - }).toThrow( - 'React depends on requestAnimationFrame. Make sure that you load a ' + - 'polyfill in older browsers.', + spyOn(console, 'error'); + require('react-dom'); + expect(console.error.calls.count()).toBe(1); + expect(console.error.calls.argsFor(0)[0]).toContain( + 'React depends on requestAnimationFrame.', ); } finally { global.requestAnimationFrame = previousRAF; From 97029e3e8b4ec196993321980d711d185261aa69 Mon Sep 17 00:00:00 2001 From: Dan Abramov Date: Wed, 2 Aug 2017 18:54:13 +0100 Subject: [PATCH 4/4] Liiiiiint --- src/renderers/shared/ReactDOMFrameScheduling.js | 1 - 1 file changed, 1 deletion(-) diff --git a/src/renderers/shared/ReactDOMFrameScheduling.js b/src/renderers/shared/ReactDOMFrameScheduling.js index e3c39ffb56948..a7023349666fa 100644 --- a/src/renderers/shared/ReactDOMFrameScheduling.js +++ b/src/renderers/shared/ReactDOMFrameScheduling.js @@ -22,7 +22,6 @@ import type {Deadline} from 'ReactFiberReconciler'; -var invariant = require('fbjs/lib/invariant'); var ExecutionEnvironment = require('fbjs/lib/ExecutionEnvironment'); if (__DEV__) {