React-virtualized: requestAnimationFrame polyfill breaks server-side rendering

Created on 18 Sep 2017  路  5Comments  路  Source: bvaughn/react-virtualized

This code causes an exception when running on server side.

if (typeof window !== "undefined") {
  win = window;
} else if (typeof self !== "undefined") {
  win = self;
} else {
  win = undefined;
}

// requestAnimationFrame() shim by Paul Irish
// http://paulirish.com/2011/requestanimationframe-for-smart-animating/
var request = win.requestanimationframe || win.webkitrequestanimationframe || win.mozrequestanimationframe || win.orequestanimationframe || win.msrequestanimationframe || function (callback) {
  return win.settimeout(callback, 1000 / 60);
};
var request = win.requestAnimationFrame || win.webkitRequestAnimationFrame || win.mozRequestAnimationFrame || win.oRequestAnimationFrame || win.msRequestAnimationFrame || function (callback) {
[1]                  ^
[1] 
[1] TypeError: Cannot read property 'requestAnimationFrame' of undefined
[1]     at Object.<anonymous> (/home/codejunkienick/upwork/imdadmin/node_modules/react-virtualized/dist/commonjs/utils/animationFrame.js:21:18)
[1]     at Module._compile (module.js:573:30)
[1]     at Module._extensions..js (module.js:584:10)
[1]     at Object.require.extensions.(anonymous function) [as .js] (/home/codejunkienick/upwork/imdadmin/node_modules/babel-register/lib/node.js:152:7)
[1]     at Module.load (module.js:507:32)
[1]     at tryModuleLoad (module.js:470:12)
[1]     at Function.Module._load (module.js:462:3)
[1]     at Module.require (module.js:517:17)
[1]     at require (internal/module.js:11:18)
[1]     at Object.<anonymous> (/home/codejunkienick/upwork/imdadmin/node_modules/react-virtualized/dist/commonjs/utils/requestAnimationTimeout.js:8:23)

Most helpful comment

I was about to open an issue for the very same thing. This seems to be introduced when Grid has started to depend on requestAnimationFrame in v9.10.0. Rolling back reac-virtualized to v9.9.0 fixed it for me.

Here is stack-trace for the error..
[2017-09-18 10:22:24.414] [FATAL] [application ] [TypeError: Cannot read property 'requestAnimationFrame' of undefined] TypeError: Cannot read property 'requestAnimationFrame' of undefined at Object.<anonymous> (/Users/prempiyush/work/code/profiling-ui-demo/node_modules/react-virtualized/dist/commonjs/utils/animationFrame.js:21:18) at Module._compile (module.js:409:26) at Module._extensions..js (module.js:416:10) at Object.require.extensions.(anonymous function) [as .js] (/Users/prempiyush/work/code/profiling-ui-demo/node_modules/babel-register/lib/node.js:134:7) at Module.load (module.js:343:32) at Function.Module._load (module.js:300:12) at Module.require (module.js:353:17) at require (internal/module.js:12:17) at Object.<anonymous> (/Users/prempiyush/work/code/profiling-ui-demo/node_modules/react-virtualized/dist/commonjs/utils/requestAnimationTimeout.js:8:23) at Module._compile (module.js:409:26) at Module._extensions..js (module.js:416:10) at Object.require.extensions.(anonymous function) [as .js] (/Users/prempiyush/work/code/profiling-ui-demo/node_modules/babel-register/lib/node.js:134:7) at Module.load (module.js:343:32) at Function.Module._load (module.js:300:12) at Module.require (module.js:353:17) at require (internal/module.js:12:17)

All 5 comments

I was about to open an issue for the very same thing. This seems to be introduced when Grid has started to depend on requestAnimationFrame in v9.10.0. Rolling back reac-virtualized to v9.9.0 fixed it for me.

Here is stack-trace for the error..
[2017-09-18 10:22:24.414] [FATAL] [application ] [TypeError: Cannot read property 'requestAnimationFrame' of undefined] TypeError: Cannot read property 'requestAnimationFrame' of undefined at Object.<anonymous> (/Users/prempiyush/work/code/profiling-ui-demo/node_modules/react-virtualized/dist/commonjs/utils/animationFrame.js:21:18) at Module._compile (module.js:409:26) at Module._extensions..js (module.js:416:10) at Object.require.extensions.(anonymous function) [as .js] (/Users/prempiyush/work/code/profiling-ui-demo/node_modules/babel-register/lib/node.js:134:7) at Module.load (module.js:343:32) at Function.Module._load (module.js:300:12) at Module.require (module.js:353:17) at require (internal/module.js:12:17) at Object.<anonymous> (/Users/prempiyush/work/code/profiling-ui-demo/node_modules/react-virtualized/dist/commonjs/utils/requestAnimationTimeout.js:8:23) at Module._compile (module.js:409:26) at Module._extensions..js (module.js:416:10) at Object.require.extensions.(anonymous function) [as .js] (/Users/prempiyush/work/code/profiling-ui-demo/node_modules/babel-register/lib/node.js:134:7) at Module.load (module.js:343:32) at Function.Module._load (module.js:300:12) at Module.require (module.js:353:17) at require (internal/module.js:12:17)

Thanks folks. Sorry for the regression. Releasing 9.10.1 with a fix momentarily.

Check out 9.10.1 and let me know if you see any additional problems. Thanks.

@bvaughn 9.10.1 fixes the problem. Thanks!

Glad to hear! Again, apologies for the regression.

Was this page helpful?
0 / 5 - 0 ratings