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 VD
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