Error: Invariant failed: Node does not exist, it may have been removed

[scdigitalmedia]

Describe the bug I'm using NextJs and I'm having an issue when trying to change the json through getserversideprops.

Error: Invariant failed: Node does not exist, it may have been removed

I'm running NextJs, and i have a [...slug].tsx page that captures the url in getserverside props, which returns the corresponding page from the database, then I have a useEffect that triggers on the 'page' variable that decodes and decompresses the content into json, i then setJson via usestate that feeds into the Frame and I'm using a custom deserializer (an example from another thread in here). When I use NextJs' Link component to navigae between the dynamic pages, i randomly get the above error. I'm not exactly sure what triggers it yet, so I'm having a hard time finding a solution.

Expected behavior The new json to be loaded into the Editor

Screenshots If applicable, add screenshots to help explain your problem.

Additional context Add any other context about the problem here.

Your environment

Software	Version(s)
craft.js	0.2.0-beta.8
React	18
TypeScript	4.6.3

[welschmoor]

Same here, after updating to NextJS 13. React 18 worked though with Next 12.3.1. I am currently struggling with this problem:

I have tested it again. Simply by changing the Next version from 12.3.1 to ^13.1.6 leads to this error. edit: I am NOT using the new app dir, I have /pages like in v12 and earlier.

[nicosh]

Are you flagging you components as client components? ("use client" directive at the top of the page)

[scdigitalmedia]

Thanks @welschmoor I'm hoping I don't have to downgrade NextJs. Not sure what impact that would have on my codebase right now, although I don't think I'm using any nextjs 13 exclusive features.

@nicosh I have not tried adding "use client" directive. On which page would I add this? On each of the components I create?

[nicosh]

@scdigitalmedia My comment make sense only if you are using next.js 13 appDir. I'm successfully using craft.js in next 13.2 (and appDir) although i'm using a slightly forked version of craft. If you are using appDir pur the "use client" directive on top of your editor page or main component.

[scdigitalmedia]

@nicosh ok that makes more sense then. I'm not using the appDir at the moment. Just the src/pages folder. I have a [...slug].tsx file in there where the Craft editor is. I'll look to moving that into the appDir

[welschmoor]

Well, can someone please post a working Next 13 test repo with CraftJs, if you have it, thanks!

[akhrarovsaid]

I'm using /pages with Craft and am also getting this error occasionally. Almost always when using actions.deserialize.

[minhktmd]

Yeah, I'm using next13 app dir And I think the problem is somewhere inside or related to actions.deserialize. I mean next version might not be the problem here I think when I use actions.deserialize(json) method, all nodes from old node tree will be clear and somewhere in code, craftjs call function to handle something with old nodes (which were deleted and not available anymore) and throw this error. This is so annoying and I'm still finding the solution for this. Or someone can tell me which is the best way to change nodeTree in Frame (with or without actions.deserialize)

[Traveller23]

I used to have this problem a lot, but now I haven't seen this error in a long time. For me, the cause of this problem is almost the same as @minhktmd said: JS calls the code in the component corresponding to the original node after craftjs has replaced the nodes. There aren't many places where the original code can be called after a node has been removed, but pretty much only three scenarios: CraftJs's useEditor & useNode, React's useEffect, and JS's setInterval & setTimeout. Just be sure to check these scenarios carefully, make sure to check for the existence of a node when you use it in those scenarios and remember to clear the setInterval ID when a component is removed. After doing this, you'll be able to avoid this error 100% of the time.