React-virtualized: Error: "Uncaught TypeError: Illegal invocation"

[jokklan]

When scrolling in a List component, do I get the exception Uncaught TypeError: Illegal invocation in Chrome. The error is thrown at https://github.com/bvaughn/react-virtualized/blob/9.18.0/source/utils/requestAnimationTimeout.js#L33.

My setup:

  "dependencies": {
    "babel-core": "^6.25.0",
    "babel-loader": "7.x",
    "babel-plugin-add-module-exports": "^0.2.1",
    "babel-plugin-syntax-dynamic-import": "^6.18.0",
    "babel-plugin-transform-class-properties": "^6.24.1",
    "babel-polyfill": "^6.23.0",
    "babel-preset-env": "^1.5.2",
    "babel-preset-react": "^6.24.1",
    "babel-preset-stage-0": "^6.22.0",
    "react": "^15.6.1",
    "react-dom": "^15.6.1",
    "webpack": "^3.0.0",
    "webpack-dev-server": "^2.5.0"
    ...
  }

This issue seems to be related: https://github.com/fritz-c/react-sortable-tree/issues/230

[bvaughn]

The new-issue template says that bug reports should provide a full repro case. Since you haven't provided this, I don't know what the error could be.

Since you mention Chrome specifically, my guess is that it may have something to do with console.log? (As discussed here.)

I'm closing this though because there isn't enough info to take action.

[vlebedeff]

@bvaughn I got the same error. I think the reason is the fact that raf and caf from utils/animationFrame are not bound to window and lose context.

[bvaughn]

I've never seen this happen, and aside from this report, I've never heard of others seeing it either. Can you provide a repro? Better yet, can you provide a fix if you're able to repro?

[jokklan]

I tried to recreate the issue in a repo, without any luck so far… but what i found out was that the error comes from here: https://github.com/bvaughn/react-virtualized/blob/9.18.0/source/utils/requestAnimationTimeout.js#L33, and that, when debugging in chrome, if I inspect this I get { _esmodule: false }. In my test repo where the error don't happen (yet) do this instead return undefined. So one guess it, that it tries to assign a native function (requestAnimationFrame) from window to a object which is not legal. But that is about how far I get in debugging. Might be something related to the setup of babel and/or webpack.

[bmakuh]

Yeah, that should be raf.call(window, timeout).

Reference: https://stackoverflow.com/questions/9677985/uncaught-typeerror-illegal-invocation-in-chrome

FWIW, it happens in FF too:

TypeError: 'cancelAnimationFrame' called on an object that does not implement interface Window.

[joeandrews]

• 1 on this will try to code up a js fiddle of the issue.

[joeandrews]

After more investigation this is a webpack issue. Global functions get called in the wrong context in Webpack 3. If you upgrade to Webpack 4 (you will also need to update any webpack plugins) this is fixed.

https://github.com/webpack/webpack/issues/5111

Hope this helps people and thanks for the library! @bvaughn

[thomaspaillot]

For those who cannot upgrade to Webpack 4, downgrading to react-virtualized 9.9.0 fixed the issue.

[lyptt]

This also occurs in more 'seasoned' build systems like gulp (when using gulp-uglify et al). Thanks @thomaspaillot for the tip!

[jbarker4682]

can anyone tell me if strictThisContextOnImports is available for webpack 1.9.10?