Replies: 11 comments 28 replies
-
|
What does Intercom do? This sounds like the DOM is mutated/replaced with a different node, and then when React tries to unmount the node it had originally appended, it crashes out, because the node was removed by a different entity. |
Beta Was this translation helpful? Give feedback.
-
|
Hitting the same issue, did you find a proper fix @clempat ? |
Beta Was this translation helpful? Give feedback.
-
|
@CalHoll The Intercom team is working on resolving the issue. From what I can tell, there aren't many additional options outside of updating the Intercom script. |
Beta Was this translation helpful? Give feedback.
-
|
@clempat is there an open issue / thread with Intercom anywhere to follow along? Facing the same thing |
Beta Was this translation helpful? Give feedback.
-
|
They only responded to my message. I don’t know if they have something public we can follow sorry. |
Beta Was this translation helpful? Give feedback.
-
|
@clempat any news from the team? still getting this error |
Beta Was this translation helpful? Give feedback.
-
|
I get the same issue with Next.js v13.4.10 without even using Intercom, specifically when I save my .scss files. I'm using CSS modules, so it looks like it's HMR related issue. However, I reverted back to v13.4.7 and it now works fine for me. |
Beta Was this translation helpful? Give feedback.
-
|
Same issue here.. Using CSS modules and this keeps popping up when I save it or refresh the page. |
Beta Was this translation helpful? Give feedback.
-
|
Hello, im also facing this kind of error when saving css module |
Beta Was this translation helpful? Give feedback.
-
|
having the same issue on next v14.0.1 |
Beta Was this translation helpful? Give feedback.
-
|
We have had this reported by two of our (Chatlio) customers as well. We tried reverting to v13.4.7 but still encountered the error occasionally still. |
Beta Was this translation helpful? Give feedback.
-
|
Hey, have you solved it for Chatlio at all? I'm struggling with getting this to work on my Next.js 14 with app router :/ |
Beta Was this translation helpful? Give feedback.
-
|
Solved by adding Add if you are using TS: Hope this helps to anyone struggling with this provider. Big thanks to Chatlio support for helping out so quickly! |
Beta Was this translation helpful? Give feedback.
-
|
After some digging I managed to fix this issue on my side. (NextJS 13 and Intercom, more specifically react-use-intercom library) So, you inject the script in your document, you call Intercom('boot') and for every url change you have to call Intercom('update'). 👍 When changing dynamic routes (I dont know if this is important, but in my case it was), there is a whole new document that renders. To fix this error, I had to Intercom('shutdown') (when clicking the link that causes the dynamic url to change) and also delete window.Intercom and window.IntercomSettings so the new script is injected and both boot/update now references the new document. (using Intercom('shutdown') without deleting window.Intercom or window.IntercomSettings still gives you the error, so it might be this window properties) In my case, only dynamic routes were having this error, probably because they were rendering a new document, which still doesn't make sense, because if its a new document, the script should be gone. 🤷 (but at the same time, window.Intercom and window.IntercomSettings still persist in the browser) Hope this helps someone |
Beta Was this translation helpful? Give feedback.
-
|
FYI, I do not have any news on a proper fix, we still use this workaround: #52625 (reply in thread) |
Beta Was this translation helpful? Give feedback.
-
|
I've been reckonin' I've been seein' a similar glitch ever since I wrangled up version 13.5, or for some other reasons that haven't been accounted for. |
Beta Was this translation helpful? Give feedback.
-
|
I am facing the same issue. anyone who managed to fix it? |
Beta Was this translation helpful? Give feedback.
-
|
We ran into this issue as well and created a custom loading mechanism of the intercom script to just remove and reload on each page. Here is a provider you can utilize: |
Beta Was this translation helpful? Give feedback.
-
|
I had the same issue with other chat providers and @pepijn-vanvlaanderen solution saved me, thanks 🎉 . |
Beta Was this translation helpful? Give feedback.
-
|
can you share the solution? |
Beta Was this translation helpful? Give feedback.
-
|
Same issue with Medallia, this is how we solved it: // HACK FIXME Medallia makes Next.js crash
// More explanations: https://github.com/vercel/next.js/discussions/52625
//
// Solution: detect when
// <meta content="width=device-width, initial-scale=1.0" name="viewport" id="kampyleMetaViewport">
// is added to the DOM and ask Medallia to remove it
useEffect(() => {
// How to manually add Medallia meta tag to the DOM:
//
// const meta = document.createElement("meta");
// meta.content = "width=device-width, initial-scale=1.0";
// meta.name = "viewport";
// meta.id = "kampyleMetaViewport";
// document.getElementsByTagName("head")[0].append(meta);
const observer = new MutationObserver((mutationList) => {
mutationList.forEach((mutation) => {
mutation.addedNodes.forEach((addedNode) => {
if (
addedNode instanceof Element &&
addedNode.id === "kampyleMetaViewport"
) {
observer.disconnect();
// @ts-expect-error
// eslint-disable-next-line @typescript-eslint/no-unsafe-member-access, @typescript-eslint/no-unsafe-call
window.KAMPYLE_VIEW?.setMetaViewport?.("remove");
}
});
});
});
observer.observe(document.head, { childList: true });
return () => {
observer.disconnect();
};
}, []); |
Beta Was this translation helpful? Give feedback.
-
|
As I understand it happens when you mess with the meta tags inside of the head tag as nextjs tracks them. In my scenario an external script adds an ID on the viewport tag. The same as above. Can I let nextjs know that the meta tag has been manipulated? I tried running the script and afterwards deleting the ID of the meta tag again. But that doesn't work. |
Beta Was this translation helpful? Give feedback.
-
|
Not related to this specific issue, however I got the same error message when I added a script (Cookiebot) which changes attributes on the script tag itself. Example: <Script
src="foo.bar"
data-id="abc"
/>I assume the script removes or edits the <Script
src="foo.bar?id=abc"
/>Again, probably not of use for anyone in here, just wanted to share it here as it was the first thing I stumbled upon. |
Beta Was this translation helpful? Give feedback.
-
Summary
I am having a Next.js (App directory) project which uses Intercom. When I open a page on mobile, open/close the intercom, and then navigate to a new page.
I am having
Cannot read properties of null (reading 'removeChild')error.Additional information
Intercom is installed on a Layout with the Script coming from Intercom documentation.
The complete error:
Example
https://github.com/clempat/nextjs-intercom
Beta Was this translation helpful? Give feedback.
All reactions