Fix react-dom ReferenceError requestAnimationFrame in non-browser env (facebook#13000) (facebook#13001)

sompylasar · gaearon · commit 188c4252a2a8 · 2018-06-08T23:12:20.000+01:00
* Fix react-dom ReferenceError requestAnimationFrame in non-browser env (facebook#13000) The facebook/react#12931 ( facebook/react@79a740c ) broke the server-side rendering: in the `fixtures/ssr` the following error appeared from the server-side when `localhost:3000` is requested: ``` ReferenceError: requestAnimationFrame is not defined at /__CENSORED__/react/build/node_modules/react-dom/cjs/react-dom.development.js:5232:34 at Object.<anonymous> (/__CENSORED__/react/build/node_modules/react-dom/cjs/react-dom.development.js:17632:5) at Module._compile (module.js:624:30) at Module._extensions..js (module.js:635:10) at Object.require.extensions.(anonymous function) [as .js] (/__CENSORED__/react/fixtures/ssr/node_modules/babel-register/lib/node.js:152:7) at Module.load (module.js:545:32) at tryModuleLoad (module.js:508:12) at Function.Module._load (module.js:500:3) at Module.require (module.js:568:17) at require (internal/module.js:11:18) ``` The exception pointed to this line: ```js // We capture a local reference to any global, in case it gets polyfilled after // this module is initially evaluated. // We want to be using a consistent implementation. const localRequestAnimationFrame = requestAnimationFrame; ``` **Test plan** 1. In `react` repo root, `yarn && yarn build`. 2. In `fixtures/ssr`, `yarn && yarn start`, 3. In browser, go to `http://localhost:3000`. 4. Observe the fixture page, not the exception message. * Move the requestAnimationFrameForReact check and warning to callsites (facebook#13000) According to the comment by @gaearon: facebook/react#13001 (comment) * Use `invariant` instead of `throw new Error`, use the same message (facebook#13000) According to the comment by @gaearon: facebook/react#13001 (comment)
diff --git a/packages/react-scheduler/src/ReactScheduler.js b/packages/react-scheduler/src/ReactScheduler.js
@@ -43,6 +43,8 @@ export type CallbackIdType = CallbackConfigType;
 
 import requestAnimationFrameForReact from 'shared/requestAnimationFrameForReact';
 import ExecutionEnvironment from 'fbjs/lib/ExecutionEnvironment';
+import invariant from 'fbjs/lib/invariant';
+import warning from 'fbjs/lib/warning';
 
 // We capture a local reference to any global, in case it gets polyfilled after
 // this module is initially evaluated.
@@ -104,6 +106,27 @@ if (!ExecutionEnvironment.canUseDOM) {
     localClearTimeout(timeoutId);
   };
 } else {
+  if (__DEV__) {
+    if (typeof requestAnimationFrameForReact !== 'function') {
+      warning(
+        false,
+        'React depends on requestAnimationFrame. Make sure that you load a ' +
+          'polyfill in older browsers. https://fb.me/react-polyfills',
+      );
+    }
+  }
+
+  let localRequestAnimationFrame =
+    typeof requestAnimationFrameForReact === 'function'
+      ? requestAnimationFrameForReact
+      : function(callback: Function) {
+          invariant(
+            false,
+            'React depends on requestAnimationFrame. Make sure that you load a ' +
+              'polyfill in older browsers. https://fb.me/react-polyfills',
+          );
+        };
+
   let headOfPendingCallbacksLinkedList: CallbackConfigType | null = null;
   let tailOfPendingCallbacksLinkedList: CallbackConfigType | null = null;
 
@@ -252,7 +275,7 @@ if (!ExecutionEnvironment.canUseDOM) {
       if (!isAnimationFrameScheduled) {
         // Schedule another animation callback so we retry later.
         isAnimationFrameScheduled = true;
-        requestAnimationFrameForReact(animationTick);
+        localRequestAnimationFrame(animationTick);
       }
     }
   };
@@ -333,7 +356,7 @@ if (!ExecutionEnvironment.canUseDOM) {
       // might want to still have setTimeout trigger scheduleWork as a backup to ensure
       // that we keep performing work.
       isAnimationFrameScheduled = true;
-      requestAnimationFrameForReact(animationTick);
+      localRequestAnimationFrame(animationTick);
     }
     return scheduledCallbackConfig;
   };
diff --git a/packages/shared/requestAnimationFrameForReact.js b/packages/shared/requestAnimationFrameForReact.js
@@ -9,25 +9,16 @@
 
 'use strict';
 
-import ExecutionEnvironment from 'fbjs/lib/ExecutionEnvironment';
-import warning from 'fbjs/lib/warning';
-
 // We capture a local reference to any global, in case it gets polyfilled after
 // this module is initially evaluated.
 // We want to be using a consistent implementation.
-const localRequestAnimationFrame = requestAnimationFrame;
+const localRequestAnimationFrame =
+  typeof requestAnimationFrame === 'function'
+    ? requestAnimationFrame
+    : undefined;
 
-if (__DEV__) {
-  if (
-    ExecutionEnvironment.canUseDOM &&
-    typeof localRequestAnimationFrame !== 'function'
-  ) {
-    warning(
-      false,
-      'React depends on requestAnimationFrame. Make sure that you load a ' +
-        'polyfill in older browsers. https://fb.me/react-polyfills',
-    );
-  }
-}
+// The callsites should check if the requestAnimationFrame imported from this module is a function,
+// fire a developer warning if it doesn't exist, and substitute it by a shim in that case
+// (e.g. that throws on call).
 
 export default localRequestAnimationFrame;
