fix: error arguments is not defined when using webpack 5

[xballoy]

Problem addressed react-virtual-list package causes error when bundled using webpack 5. Simply adding import VirtualList from 'react-virtual-list' to any file produces the following error:

Uncaught ReferenceError: arguments is not defined
    at Object../node_modules/react-virtual-list/lib/utils/throttleWithRAF.js (bundle.js:33553:18)
    at Object.options.factory (bundle.js:70557:31)
    at __webpack_require__ (bundle.js:70007:33)
    at fn (bundle.js:70228:21)
    at Object../node_modules/react-virtual-list/lib/VirtualList.js (bundle.js:33246:24)
    at Object.options.factory (bundle.js:70557:31)
    at __webpack_require__ (bundle.js:70007:33)
    at fn (bundle.js:70228:21)
    at Module../src/App.js (bundle.js:67:76)
    at Module.options.factory (bundle.js:70557:31)

That's because webpack 5 uses arrow function to wrap modules but in webpack 4 it was using normal functions.

Solution

As seen on MDN, using rest parameters is a good alternative to using an arguments object.

[xballoy]

As it is unlikely that is PR is merge due to no activity on the repository you can use patch-package to fix it on your project.

1. Install patch-package
2. Create a file patches/react-virtual-list+2.3.0.patch with the following content

diff --git a/node_modules/react-virtual-list/lib/utils/throttleWithRAF.js b/node_modules/react-virtual-list/lib/utils/throttleWithRAF.js
index 91a30a0..f36b03f 100644
--- a/node_modules/react-virtual-list/lib/utils/throttleWithRAF.js
+++ b/node_modules/react-virtual-list/lib/utils/throttleWithRAF.js
@@ -3,18 +3,21 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-var _arguments = arguments;
 
 exports.default = function (fn) {
   var running = false;
 
   return function () {
+    for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+
     if (running) return;
 
     running = true;
 
     window.requestAnimationFrame(function () {
-      fn.apply(undefined, _arguments);
+      fn.apply(undefined, args);
 
       running = false;
     });

3. Clear webpack cache
4. Run npm install

[ferdelamad]

It will be very nice if this MR could get merged.

Thanks, @xballoy for the suggestion/temp solution!

[xballoy]

@ferdelamad As this PR is probably never gonna be merged I switched to https://github.com/bvaughn/react-window which is actively developed.