Using image-zoom with Next.js Server components

[kylerphillips]

I'm trying to use image-zoom as a server component in a markdown exported Next Image component. Curious if others have ran into similar problems when trying to use app router?

import Zoom from "react-medium-image-zoom";
import "react-medium-image-zoom/dist/styles.css";

function Image(props: any) {
  return (
    <Zoom>
      <NextImage alt={props.alt} {...props} />
    </Zoom>
  );
}

Error: Class extends value undefined is not a constructor or null

This might be caused by a React Class Component being rendered in a Server Component, React Class Components only works in Client Components. Read more: https://nextjs.org/docs/messages/class-component-in-server-component

[rpearce]

@kylerphillips What version are you on? We just released a patch version today to fix something with NextJS, but it's not impossible it did something else Next doesn't like.

[kylerphillips]

@kylerphillips What version are you on? We just released a patch version today to fix something with NextJS, but it's not impossible it did something else Next doesn't like.

I'm on 14.0.4, happy to do any further testing to see if it is or isn't an isolated issue.

[rpearce]

@kylerphillips I meant what version of this library?

[rpearce]

Wait--does Next not allow class components to be rendered on the server any more?

Oh, yay... https://nextjs.org/docs/messages/class-component-in-server-component

[kylerphillips]

I was able to fix my switching my markdown component to a client component ("use client")