rpearce/react-medium-image-zoom

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 opened this issue · 23 comments

kizeesmack commented

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 commented

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 commented

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 commented

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 commented

Here are a few examples for reference:

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
  • 👍1
rpearce commented

@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 commented

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!

  • 👍1
rpearce commented

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

steven-tey commented

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!

  • 👍1
  • 🚀1
rpearce commented

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

  • 👍1
flosrn commented

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

  • 👀2
ronald-das commented

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

  • 👀1
tszhong0411 commented

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

thiskevinwang commented

@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 👋 😄

  • 👍1
  • 🎉1
  • ❤️1
  • 🚀1
ilhamsa1 commented

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

image

rpearce commented

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 commented

@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 commented

Seeing the same error,

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