Issue with iframe disappearance and marker.io SDK incompatibility when changing language in Next.js 13 with App routing

[gmixoulis]

Issue Description:
I am currently working on a web project that utilizes Next.js 13 with App routing. To enhance the user experience, I have integrated the react-i18next library for language translation. However, I have encountered a critical issue related to iframe behavior and the functionality of the marker.io SDK when changing the language.

Problem Details:
When I switch the language, the iframe generated by marker.io mysteriously disappears from the page. Upon investigating the issue further, I noticed the following problematic behaviors:

isvisible Function: The isvisible function returns true even though the iframe is no longer visible on the page.

isExtensionInstalled Function: The isExtensionInstalled function returns false, indicating that the marker.io extension is not installed, even though it was working previously.

Error on Reload: If I attempt to reload the page after changing the language, I encounter an error related to the document.querySelector('[data-marker-styles="1"]').remove() operation. This error is specifically a "TypeError: Cannot read properties of null (reading 'remove')".

Context and Workaround:
I have noticed that when I refresh the entire page, the iframe reappears, and everything functions as expected. To provide additional context, I am utilizing the script installer for marker.io because directly importing the SDK from npm leads to a ".remove" error, likely due to its placement within a useEffect function. Unfortunately, changing the language disrupts the entire application and leads to this issue.

Request for Assistance:
I kindly request assistance in resolving this issue. It is critical for the proper functioning of our multilingual web project. Any guidance, insights, or potential workarounds would be greatly appreciated.

Thank you in advance for your help and support in resolving this matter.