When I deploy to Vercel / Next 13 and I change routes to a page I get "DOMException: Failed to execute 'showModal' on 'HTMLDialogElement': The element is not in a Document."

[kizeesmack]

When the page is refreshed the modal works. When the page is visited through a link it does not work and the error comes up.

"DOMException: Failed to execute 'showModal' on 'HTMLDialogElement': The element is not in a Document."

Steps to reproduce / narrow test

1. Tried both zoom and controlled zoom, both are having issues.
2. Confirm that the modal does not work and the error comes only on route change , the initial route has no zoom instance.
3. Refresh on route with zoom and it works fine.

using React latest 18+ and Next js 13 app directory

[kizeesmack]

just in addition on initial home page load with a component that has in it

is not in the html tree. When it is refreshed and visited through another route it appears.

This is does not happen in development mode only production / npm start.

[rpearce]

Hi, @kizeesmack, and I'm sorry you're having issues.

Are you saying that when the page is loaded, you are immediately trying to zoom the image (which opens the modal dialog), but the error occurs?

It would be immensely helpful if you could share a functioning example that reproduces the issue. That saves me from trying to guess exactly what you're doing, and it will let us figure this out faster.

[steven-tey]

Running into this issue as well @rpearce, but it looks like it happens intermittently. Will try to see if I can figure out why it's happening

[steven-tey]

Here are a few examples for reference:

• https://dub.sh/help/article/what-is-dub
• https://dub.sh/help/article/pro-plan

It looks like if you navigate to a page via next/link, it works, but when you refresh the page, it breaks.

CleanShot.2023-08-02.at.12.02.21.mp4

[rpearce]

@steven-tey Do you have the time to create an example project that demonstrates the issue? My spouse's health issues are extremely bad today, but if I've got someplace small to start, I can start looking at it tonight.

[steven-tey]

Made a minimal repro here: https://rmiz-bug.vercel.app/

Code: https://github.com/uncurated-tests/rmiz-bug

It seems to work correctly though so I'm going to keep investigating to see what's causing this issue!

[rpearce]

Yes, something tiny that demonstrates the issue will probably mean a quick fix!

[steven-tey]

Ahhh I figured it out! This happens when you use react-medium-image-zoom with the Edge Runtime – getting this in the logs:

EvalError: Code generation from strings disallowed for this context
    at (node_modules/next-contentlayer/dist/hooks/useMDXComponent.js:9:15)
    at (node_modules/next-contentlayer/dist/hooks/useMDXComponent.js:13:31)

Made a minimal repro here: https://rmiz-bug.vercel.app/ (code)

Reproduction steps:

1. On https://rmiz-bug.vercel.app/, click on "POST"
2. Click on the image – it zooms in fine
3. Refresh the page (or visit https://rmiz-bug.vercel.app/post directly)
4. Click on the image – BOOM, you get the Application error: a client-side exception has occurred (see the browser console for more information). error

CleanShot.2023-08-02.at.19.10.01.mp4

Changing the runtime to nodejs worked as a temporary fix for now!

This looks more of a Next.js bug so I've surfaced this to the Next.js team – we're looking into it!

[rpearce]

Ok, that's a great investigation and breakdown. Please let me know if something needs adjusting over on this side.

[flosrn]

Hi @steven-tey , have you found a solution? I am facing the same issue

[ronald-das]

Can confirm, facing the same issue with nextjs 13.4.19 and react-medium-image-zoom: 5.1.8 , @steven-tey saw your tweet https://twitter.com/steventey/status/1684607625240150016 what are you guys using? couldn't find this library in https://github.com/vercel/next.js/blob/canary/package.json

[tszhong0411]

@ronald-das The documentation for Next.js is not open source.

[thiskevinwang]

@kizeesmack are you possibly using this via MDX?

If so, try adding https://github.com/remarkjs/remark-unwrap-images as a remarkPlugin.

I was getting the same error during next dev
... and I think it was predicated by a hydration mismatch
... and I think this was due to MDX wrapping images in a <p> tag. (see mdx-js/mdx#208 for details)

Hello

![](/foo.webp)

That image was getting wrapped in a P tag and I was seeing hydration mismatches

I installed that remark plugin, hydration errors went away, and I didn't get the Zoom error anymore. 🎉

As an aside, you can also see on https://nextjs.org/docs/app/building-your-application/rendering that the images (<figure>) are not nested within a <p> tag.

Also, whats up @steven-tey 👋 😄

[ilhamsa1]

I am facing the same issue. Have you found a solution, or do you have any other library recommendations?

[rpearce]

Y'all feel free to submit a PR if you think you know how to solve it on this side (as opposed to a possible bug in Next.js, as mentioned above).

[rpearce]

@steven-tey

This looks more of a Next.js bug so I've surfaced this to the Next.js team – we're looking into it!

Have there been any updates on the Vercel side about this?

[sgup]

Seeing the same error,

"next": "14.0.4",
"react-medium-image-zoom": "5.1.9",

[rpearce]

If someone can provide an example repo of this breaking, I'll re-investigate to see what can be done on this side. 🙏

[u3u]

When I use Astro with View Transitions, I encounter the same problem. After looking at the source code, I found that elDialogContainer is initialized outside of the component's lifecycle. This means it will only be created once when react-medium-image-zoom is first imported. So when the page DOM changes, the elDialogContainer element is lost, so the dialog element will not be created again for the second time.

react-medium-image-zoom/source/Controlled.tsx

Lines 31 to 37 in bf6af76

	let elDialogContainer: HTMLDivElement
	if (typeof document !== 'undefined') {
	elDialogContainer = document.createElement('div')
	elDialogContainer.setAttribute('data-rmiz-portal', '')
	document.body.appendChild(elDialogContainer)
	}

react-medium-image-zoom/source/Controlled.tsx

Lines 304 to 322 in bf6af76

	{hasImage && elDialogContainer != null && createPortal(
	<dialog /* eslint-disable-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-noninteractive-element-interactions, jsx-a11y/no-redundant-roles */
	aria-labelledby={idModalImg}
	aria-modal="true"
	className={classDialog}
	data-rmiz-modal=""
	id={idModal}
	onClick={handleDialogClick}
	onClose={handleUnzoom /* eslint-disable-line react/no-unknown-property */}
	onCancel={handleDialogCancel}
	ref={refDialog}
	role="dialog"
	>
	<div data-rmiz-modal-overlay={dataOverlayState} />
	<div data-rmiz-modal-content="" ref={refModalContent}>
	{modalContent}
	</div>
	</dialog>
	, elDialogContainer

[rpearce]

@u3u Do these frameworks remove everything within the <body> element when they change routes?

[u3u]

Screen.Recording.2024-01-13.at.21.26.13.mov

@rpearce Yes, change pages in Astro will rebuild the content within all <html> elements.
This is a reproduction: https://qwq.cat/tools/file-to-base64
I think #462 can fix it.

In the Next.js framework, although the content in <body> will not be deleted, directly refreshing the page reveals that there is no elDialogContainer element created within <body>. I believe this is the same issue because the execution timing of creating containers is during module import (as they are written at the top level of modules rather than component lifecycles), and in server-side rendering, they are not created at all due to the condition typeof document !== 'undefined'. I think changing it to runtime import can solve the problem in Next.js.

const Zoom = dynamic(() => import('react-medium-image-zoom'), { ssr: false })

[rpearce]

@u3u Thank you for the recording and the explanation. This all makes sense to me, and we'll get this issue resolved today or tomorrow!

[rpearce]

This issue should now be resolved in react-medium-image-zoom@5.1.10

@kizeesmack @thiskevinwang @u3u @tszhong0411 — All of you have been added as project contributors in the README thanks to your bug identification, helpfulness, and code delivery. Thank you so much for your help.