React application failing with Uncaught TypeError: Cannot read property 'forEach' of undefined


My react app started failing with error Uncaught TypeError: Cannot read property 'forEach' of undefined and not giving any stacktrace related to my application's code.
I have updated to latest react also tried deleting node_modules folder still the error persists

Uncaught TypeError: Cannot read property 'forEach' of undefined
    at startWorkOnPendingInteractions (react-dom.development.js:26047)
    at performSyncWorkOnRoot (react-dom.development.js:24256)
    at react-dom.development.js:12199
    at unstable_runWithPriority (scheduler.development.js:697)
    at runWithPriority$2 (react-dom.development.js:12149)
    at flushSyncCallbackQueueImpl (react-dom.development.js:12194)
    at flushSyncCallbackQueue (react-dom.development.js:12182)
    at scheduleUpdateOnFiber (react-dom.development.js:23709)
    at updateContainer (react-dom.development.js:27103)
    at legacyRenderSubtreeIntoContainer (react-dom.development.js:27544)
    at Object.render (react-dom.development.js:27608)
    at Object../src/index.js (index.js:105)
    at __webpack_require__ (bootstrap 6cea5049fc4d597a00c7:678)
    at fn (bootstrap 6cea5049fc4d597a00c7:88)
    at Object.0 (utils.js:270)
    at __webpack_require__ (bootstrap 6cea5049fc4d597a00c7:678)
    at bootstrap 6cea5049fc4d597a00c7:724
    at bootstrap 6cea5049fc4d597a00c7:724


TypeError: Cannot read property 'forEach' of undefined
startWorkOnPendingInteractions
node_modules/react-dom/cjs/react-dom.development.js:25997
  25994 | 
  25995 | 
  25996 | var interactions = new Set();
> 25997 | root.pendingInteractionMap.forEach(function (scheduledInteractions, scheduledExpirationTime) {
  25998 |   if (scheduledExpirationTime >= expirationTime) {
  25999 |     scheduledInteractions.forEach(function (interaction) {
  26000 |       return interactions.add(interaction);
View compiled
performSyncWorkOnRoot
node_modules/react-dom/cjs/react-dom.development.js:24168
  24165 | 
  24166 | if (root !== workInProgressRoot || expirationTime !== renderExpirationTime) {
  24167 |   prepareFreshStack(root, expirationTime);
> 24168 |   startWorkOnPendingInteractions(root, expirationTime);
  24169 | } // If we have a work-in-progress fiber, it means there's still work to do
  24170 | // in this root.
  24171 | 
View compiled
(anonymous function)
node_modules/react-dom/cjs/react-dom.development.js:12238
  12235 |     var callback = queue[i];
  12236 | 
  12237 |     do {
> 12238 |       callback = callback(_isSync);
  12239 |     } while (callback !== null);
  12240 |   }
  12241 | });
View compiled
unstable_runWithPriority
node_modules/scheduler/cjs/scheduler.development.js:815
  812 | currentPriorityLevel = priorityLevel;
  813 | 
  814 | try {
> 815 |   return eventHandler();
  816 | } finally {
  817 |   currentPriorityLevel = previousPriorityLevel;
  818 | }
View compiled
runWithPriority$2
node_modules/react-dom/cjs/react-dom.development.js:12188
  12185 | 
  12186 | function runWithPriority$2(reactPriorityLevel, fn) {
  12187 |   var priorityLevel = reactPriorityToSchedulerPriority(reactPriorityLevel);
> 12188 |   return Scheduler_runWithPriority(priorityLevel, fn);
  12189 | }
  12190 | function scheduleCallback(reactPriorityLevel, callback, options) {
  12191 |   var priorityLevel = reactPriorityToSchedulerPriority(reactPriorityLevel);
View compiled
flushSyncCallbackQueueImpl
node_modules/react-dom/cjs/react-dom.development.js:12233
  12230 | try {
  12231 |   var _isSync = true;
  12232 |   var queue = syncQueue;
> 12233 |   runWithPriority$2(ImmediatePriority, function () {
  12234 |     for (; i < queue.length; i++) {
  12235 |       var callback = queue[i];
  12236 | 
View compiled
flushSyncCallbackQueue
node_modules/react-dom/cjs/react-dom.development.js:12221
  12218 |     Scheduler_cancelCallback(node);
  12219 |   }
  12220 | 
> 12221 |   flushSyncCallbackQueueImpl();
  12222 | }
  12223 | 
  12224 | function flushSyncCallbackQueueImpl() {
View compiled
scheduleUpdateOnFiber
node_modules/react-dom/cjs/react-dom.development.js:23601
  23598 |       // scheduleCallbackForFiber to preserve the ability to schedule a callback
  23599 |       // without immediately flushing it. We only do this for user-initiated
  23600 |       // updates, to preserve historical behavior of sync mode.
> 23601 |       flushSyncCallbackQueue();
  23602 |     }
  23603 |   }
  23604 | } else {
View compiled
scheduleRootUpdate
node_modules/react-dom/cjs/react-dom.development.js:26945
  26942 |   }
  26943 | 
  26944 |   enqueueUpdate(current$$1, update);
> 26945 |   scheduleWork(current$$1, expirationTime);
  26946 |   return expirationTime;
  26947 | }
  26948 | 
View compiled
updateContainerAtExpirationTime
node_modules/react-dom/cjs/react-dom.development.js:26973
  26970 |     container.pendingContext = context;
  26971 |   }
  26972 | 
> 26973 |   return scheduleRootUpdate(current$$1, element, expirationTime, suspenseConfig, callback);
  26974 | }
  26975 | 
  26976 | function findHostInstance(component) {
View compiled
updateContainer
node_modules/react-dom/cjs/react-dom.development.js:27075
  27072 | 
  27073 |   var suspenseConfig = requestCurrentSuspenseConfig();
  27074 |   var expirationTime = computeExpirationForFiber(currentTime, current$$1, suspenseConfig);
> 27075 |   return updateContainerAtExpirationTime(element, container, parentComponent, expirationTime, suspenseConfig, callback);
  27076 | }
  27077 | function getPublicRootInstance(container) {
  27078 |   var containerFiber = container.current;
View compiled
legacyRenderSubtreeIntoContainer
node_modules/react-dom/cjs/react-dom.development.js:27679
  27676 |   } // Update
  27677 | 
  27678 | 
> 27679 |   updateContainer(children, fiberRoot, parentComponent, callback);
  27680 | }
  27681 | 
  27682 | return getPublicRootInstance(fiberRoot);
View compiled
render
node_modules/react-dom/cjs/react-dom.development.js:27756
  27753 |     !!container._reactHasBeenPassedToCreateRootDEV ? warningWithoutStack$1(false, 'You are calling ReactDOM.render() on a container that was previously ' + 'passed to ReactDOM.%s(). This is not supported. ' + 'Did you mean to call root.render(element)?', enableStableConcurrentModeAPIs ? 'createRoot' : 'unstable_createRoot') : void 0;
  27754 |   }
  27755 | 
> 27756 |   return legacyRenderSubtreeIntoContainer(null, element, container, false, callback);
  27757 | },
  27758 | unstable_renderSubtreeIntoContainer: function (parentComponent, element, containerNode, callback) {
  27759 |   (function () {
View compiled
./src/index.js
src/index.js:105
  102 | });
  103 | 
  104 | 
> 105 | ReactDOM.render(
  106 |       <Provider store={store}>
  107 |         <MuiThemeProvider theme={theme}>
  108 |             <CssBaseline />
View compiled
▶ 6 stack frames were collapsed.
This screen is visible only in development. It will not appear if the app crashes in production.
Open your browser’s developer console to further inspect this error.


4 Answers

5 years ago by

did you manage to fix the problem?

4 years ago by Vlad T

Could you fix this problem?

4 years ago by Varsha Teckchandani

I managed to solve, in my case was the index.html file in public that was minified by webpack. After restoring it from a clean index.html file, everything went back to normal.

Consider that in my case, and I don't know why, webpack decided to push a lot of minified JS into the index.html file.

I hope it helps someone, since I could not find any tip in my DuckDuckGo searchs. Had a really bad time with this issue.

4 years ago by Diego Morais

thanks diego, your suggestion worked. Don't know why yet.

3 years ago by palash