bug: Uncaught DOMException: Failed to execute 'replaceChild' on 'Node'

[jalexanderII]

Uncaught TypeError: Cannot read properties of undefined (reading '__t')
    at Block.p (million.52d69b41.mjs:779:1)
    at ArrayBlock.p (million.52d69b41.mjs:516:1)
    at react.mjs:84:1

and

Uncaught DOMException: Failed to execute 'replaceChild' on 'Node': The node to be replaced is not a child of this node.
    at Block.p (http://localhost:3000/static/js/bundle.js:1078098:29)
    at ArrayBlock.p (http://localhost:3000/static/js/bundle.js:1077859:16)
    at http://localhost:3000/static/js/bundle.js:1077131:67

Unable to understand why the error is occurring, this should be the problem code:

          if (newValue && typeof newValue === "object" && "foreign" in newValue) {
            const scopeEl = el[TEXT_NODE_CACHE][k];
            if ("unstable" in newValue && oldValue !== newValue) {
              const newScopeEl = newValue.current;
              el[TEXT_NODE_CACHE][k] = newScopeEl;
              replaceChild$.call(el, newScopeEl, scopeEl);
            } else {
              newValue.current = scopeEl;
            }
            continue;

inside of class Block.

I tried to // million-ignore all of the functions in the components where the error occurred but the error didn't go away.

Potential solution, Conditional Replacement: Check if oldChild is actually a child of parentNode before using replaceChild. You can verify with parentNode.contains(oldChild)

if (parentNode.contains(oldChild)) {
  parentNode.replaceChild(newChild, oldChild);
} else {
  // Handle the case when oldChild is not a child of parentNode
}

[github-actions[bot]]

Thanks for opening this issue! A maintainer will review it soon.

[aidenybai]

Hi can you provide a repro!

[tobySolutions]

@jalexanderII, are you there?

[jalexanderII]

Hey team. I do not know how to reproduce. I am not sure why this is occurring or what in my code is triggering the problem. All I know is the source of the error from the error message.

[jalexanderII]

@tobySolutions & @aidenybai

[github-actions[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs within the next 7 days.

[riju-stone]

I am facing the same issue for my site. Here is the error in console -

This is my vite.config.js

This is main App.js file

I'm not sure from where the error is coming from though. Any help would be highly appreciated.

[vimalsonara]

I'm also facing the same issue. I'm rendering same component 4 times, but it's only showing 1 time.

sample code url: https://stackblitz.com/edit/vitejs-vite-ofx7tf?file=src%2FApp.tsx

[tobySolutions]

I'm also facing the same issue. I'm rendering same component 4 times, but it's only showing 1 time.

sample code url: https://stackblitz.com/edit/vitejs-vite-ofx7tf?file=src%2FApp.tsx

Thanks for the reproduction. I'll definitely check it and get back to you!

[tobySolutions]

I'm also facing the same issue. I'm rendering same component 4 times, but it's only showing 1 time. sample code url: https://stackblitz.com/edit/vitejs-vite-ofx7tf?file=src%2FApp.tsx

Thanks for the reproduction. I'll definitely check it and get back to you!

Hey there @vimalsonara, so I made tweaks and I used manual mode to make the optimizations for MonthDaysDisplay, I had to ignore automatic mode for the MonthDaysDisplay component: https://stackblitz.com/edit/vitejs-vite-hjcfai?file=src%2FMonthDaysDisplay.tsx

[vimalsonara]

I'm also facing the same issue. I'm rendering same component 4 times, but it's only showing 1 time. sample code url: https://stackblitz.com/edit/vitejs-vite-ofx7tf?file=src%2FApp.tsx

Thanks for the reproduction. I'll definitely check it and get back to you!

Hey there @vimalsonara, so I made tweaks and I used manual mode to make the optimizations for MonthDaysDisplay, I had to ignore automatic mode for the MonthDaysDisplay component: https://stackblitz.com/edit/vitejs-vite-hjcfai?file=src%2FMonthDaysDisplay.tsx

Thank you @tobySolutions It's working now.

[tobySolutions]

I'm also facing the same issue. I'm rendering same component 4 times, but it's only showing 1 time. sample code url: https://stackblitz.com/edit/vitejs-vite-ofx7tf?file=src%2FApp.tsx

Thanks for the reproduction. I'll definitely check it and get back to you!

Hey there @vimalsonara, so I made tweaks and I used manual mode to make the optimizations for MonthDaysDisplay, I had to ignore automatic mode for the MonthDaysDisplay component: https://stackblitz.com/edit/vitejs-vite-hjcfai?file=src%2FMonthDaysDisplay.tsx

Thank you @tobySolutions It's working now.

My pleasure @vimalsonara!

[github-actions[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs within the next 7 days.