diff --git a/src/renderers/dom/fiber/ReactDOMFiberEntry.js b/src/renderers/dom/fiber/ReactDOMFiberEntry.js index 0e0559d47a1d7..4732e4e8127a0 100644 --- a/src/renderers/dom/fiber/ReactDOMFiberEntry.js +++ b/src/renderers/dom/fiber/ReactDOMFiberEntry.js @@ -57,11 +57,29 @@ var { } = ReactDOMFiberComponent; var {precacheFiberNode, updateFiberProps} = ReactDOMComponentTree; +let checkForRAF = () => {}; + if (__DEV__) { var lowPriorityWarning = require('lowPriorityWarning'); var warning = require('fbjs/lib/warning'); var validateDOMNesting = require('validateDOMNesting'); var {updatedAncestorInfo} = validateDOMNesting; + var checkedRaf = false; + + checkForRAF = () => { + if ( + !checkedRaf && + 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', + ); + } + checkedRaf = true; + }; if ( typeof Map !== 'function' || @@ -731,6 +749,7 @@ var ReactDOMFiber = { container: DOMContainer, callback: ?Function, ) { + checkForRAF(); return renderSubtreeIntoContainer( null, element, diff --git a/src/renderers/dom/fiber/__tests__/ReactDOMFiber-test.js b/src/renderers/dom/fiber/__tests__/ReactDOMFiber-test.js index 36f63a3b4f095..ef93c2f1594da 100644 --- a/src/renderers/dom/fiber/__tests__/ReactDOMFiber-test.js +++ b/src/renderers/dom/fiber/__tests__/ReactDOMFiber-test.js @@ -10,7 +10,6 @@ 'use strict'; var React = require('react'); -var ReactDOM = require('react-dom'); var ReactTestUtils = require('react-dom/test-utils'); var PropTypes = require('prop-types'); @@ -20,11 +19,30 @@ describe('ReactDOMFiber', () => { } var container; + var ReactDOM; beforeEach(() => { + ReactDOM = require('react-dom'); container = document.createElement('div'); }); + it('warns when requestAnimationFrame is not polyfilled in the browser', () => { + const previousRAF = global.requestAnimationFrame; + try { + global.requestAnimationFrame = undefined; + spyOn(console, 'error'); + + ReactDOM.render(
, container); + + expect(console.error.calls.count()).toBe(1); + expect(console.error.calls.argsFor(0)[0]).toContain( + 'React depends on requestAnimationFrame.', + ); + } finally { + global.requestAnimationFrame = previousRAF; + } + }); + it('should render strings as children', () => { const Box = ({value}) =>