Uncaught (in promise) TypeError: Cannot read properties of null (reading 'content')

[omgsian]

Hi,

Thank you for creating this plugin. I'm trying to install it following the instructions, but I'm not able to.

Here's how I've set it up:

zoom: {
  selector: ".zoom-image",
  config: {
    // options you can specify via https://github.com/francoischalifour/medium-zoom#usage
    background: {
      light: "rgb(255, 255, 255)",
      dark: "rgb(50, 50, 50)",
    },
  },
},

In my .mdx file, I've attached the zoom-image class to my <img> as such:

<figure>
  <img src="/img/case-studies/image.png" className="zoom-image" />
  <figcaption>
    Caption here.
  </figcaption>
</figure>

When I click on that image, this is what I get in dev console:

js:387  Uncaught (in promise) TypeError: Cannot read properties of null (reading 'content')
    at eval (medium-zoom.esm.js:387:1)
    at new Promise (<anonymous>)
    at open (medium-zoom.esm.js:342:1)
    at toggle (medium-zoom.esm.js:533:1)
    at HTMLDocument._handleClick (medium-zoom.esm.js:131:1)
eval @ medium-zoom.esm.js:387

I know the selector works because the class medium-zoom-image is added to my image when I inspect it, and there's even a div overlay with the class medium-zoom-overlay but it's just not showing up.

Can I get some assistance pls?

[danvy]

I have the same issue this Docusaurus 3.4