diff --git a/packages/react-dom/src/__tests__/ReactDOM-test.js b/packages/react-dom/src/__tests__/ReactDOM-test.js index 8c21143d52d72..0b9e9ce44c05e 100644 --- a/packages/react-dom/src/__tests__/ReactDOM-test.js +++ b/packages/react-dom/src/__tests__/ReactDOM-test.js @@ -434,10 +434,10 @@ describe('ReactDOM', () => { } }); - it('warns when requestAnimationFrame is not polyfilled in the browser', () => { + it('warns when requestAnimationFrame is not polyfilled', () => { const previousRAF = global.requestAnimationFrame; try { - global.requestAnimationFrame = undefined; + delete global.requestAnimationFrame; jest.resetModules(); expect(() => require('react-dom')).toWarnDev( "This browser doesn't support requestAnimationFrame.", diff --git a/packages/react-scheduler/src/ReactScheduler.js b/packages/react-scheduler/src/ReactScheduler.js index 50252a827ab8e..e59176411d2e4 100644 --- a/packages/react-scheduler/src/ReactScheduler.js +++ b/packages/react-scheduler/src/ReactScheduler.js @@ -44,18 +44,6 @@ export type CallbackIdType = CallbackConfigType; import {canUseDOM} from 'shared/ExecutionEnvironment'; import warning from 'shared/warning'; -if (__DEV__) { - if (canUseDOM && typeof requestAnimationFrame !== 'function') { - warning( - false, - // TODO: reword this when schedule is a stand-alone module - "This browser doesn't support requestAnimationFrame. " + - 'Make sure that you load a ' + - 'polyfill in older browsers. https://fb.me/react-polyfills', - ); - } -} - // 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. @@ -64,12 +52,24 @@ const localDate = Date; // This initialization code may run even on server environments // if a component just imports ReactDOM (e.g. for findDOMNode). // Some environments might not have setTimeout or clearTimeout. +// However, we always expect them to be defined on the client. // https://github.com/facebook/react/pull/13088 const localSetTimeout = typeof setTimeout === 'function' ? setTimeout : (undefined: any); const localClearTimeout = typeof clearTimeout === 'function' ? clearTimeout : (undefined: any); +// We don't expect either of these to necessarily be defined, +// but we will error later if they are missing on the client. +const localRequestAnimationFrame = + typeof requestAnimationFrame === 'function' + ? requestAnimationFrame + : (undefined: any); +const localCancelAnimationFrame = + typeof cancelAnimationFrame === 'function' + ? cancelAnimationFrame + : (undefined: any); + const hasNativePerformanceNow = typeof performance === 'object' && typeof performance.now === 'function'; @@ -123,8 +123,22 @@ if (!canUseDOM) { localClearTimeout(timeoutId); }; } else { - const localRequestAnimationFrame = requestAnimationFrame; - const localCancelAnimationFrame = cancelAnimationFrame; + if (typeof localRequestAnimationFrame !== 'function') { + warning( + false, + "This browser doesn't support requestAnimationFrame. " + + 'Make sure that you load a ' + + 'polyfill in older browsers. https://fb.me/react-polyfills', + ); + } + if (typeof localCancelAnimationFrame !== 'function') { + warning( + false, + "This browser doesn't support cancelAnimationFrame. " + + '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;