fix: error arguments is not defined when using webpack 5

xballoy commented 2 years ago

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 commented 2 years ago

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.

Install patch-package

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 commented 1 year ago

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

Thanks, @xballoy for the suggestion/temp solution!

xballoy commented 1 year ago

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

developerdizzle / react-virtual-list

fix: error arguments is not defined when using webpack 5 #87