[트러블슈팅] Next.js + react-photo-view

1user@MacBookProui-MacBookPro mdx-blog % npm run build
2> mdx-blog@1.0.0 build
3> next build
4• Next.js 16.1.4 (Turbopack)
5Creating an optimized production build
6• Compiled successfully in 1492.4ms
7• Finished TypeScript in 945.7ms
8• Collecting page data using 11 workers in 261.5ms
9Error occurred prerendering page "/posts/2025-04-07-fsd-example-nextjs". Read more: https://nextjs.org/docs/messages/prerender-error
10Error: Element type is invalid: expected a string (for built-in components) or a class/function
11(for composite components) but got: undefined.
12at ignore-listed frames {
13digest: 3649311722'
14Export encountered an error on /posts/[post]/page: /posts/2025-04-07-fsd-example-nextjs, exiting the build.
15× Next. js build worker exited with code: 1 and signal: null ry user@MacBookProui-MacBookPro mdx-blog%|

1/* @/mdx-components.tsx */
2
3/* ... */
4
5import type { MDXComponents } from "mdx/types";
6import { PhotoView } from "./shared/ui/photo";
7
8const components = {
9  /* ... */
10
11  img: (props) => (
12    <span className="my-2 flex items-center justify-center">
13      <PhotoView src={props.src}>
14        {/* eslint-disable-next-line @next/next/no-img-element */}
15        <img
16          {...props}
17          className="cursor-zoom-in rounded-lg border border-gray-200 shadow-[0_4px_8px_0_rgba(0,0,0,0.2),0_6px_20px_0_rgba(0,0,0,0.19)]"
18          alt={props.alt}
19        />
20      </PhotoView>
21    </span>
22  ),
23
24  /* ... */
25} satisfies MDXComponents;
26
27export function useMDXComponents(): MDXComponents {
28  return components;
29}

1/* @/shared/ui/photo/PhotoView.tsx */
2
3"use client";
4
5import { JSXElementConstructor, ReactElement } from "react";
6import { PhotoView as BasePhotoView } from "react-photo-view";
7
8interface PhotoViewProps {
9  src: string;
10  children: ReactElement<unknown, string | JSXElementConstructor<unknown>>;
11}
12
13export const PhotoView = ({ src, children }: PhotoViewProps) => {
14  return <BasePhotoView src={src}>{children}</BasePhotoView>;
15};

1/* @/shared/ui/photo/PhotoView.tsx */
2
3"use client";
4
5import dynamic from "next/dynamic";
6import { JSXElementConstructor, ReactElement } from "react";
7
8const BasePhotoView = dynamic(
9  () => import("react-photo-view").then((mod) => mod.PhotoView),
10  { ssr: false },
11);
12
13interface PhotoViewProps {
14  src: string;
15  children: ReactElement<unknown, string | JSXElementConstructor<unknown>>;
16}
17
18export const PhotoView = ({ src, children }: PhotoViewProps) => {
19  return <BasePhotoView src={src}>{children}</BasePhotoView>;
20};