Error Next Build Next 14.2.7

[aryadaulat]

Describe the bug Error Next Build Next 14.2.7

To Reproduce Steps to reproduce the behavior including code snippet (if applies):

1. Go to '...'
2. Click on '....'
3. Scroll down to '....'
4. See error

You can make use of react-pdf REPL to share the snippet

Expected behavior Success Build But Got Error , if I make that component dynamic , my page will error , if not , I got error when next build

"use client";

import KeikoInvoice from "./KeikoInvoice"; import dynamic from "next/dynamic"; import { useAppSelector } from "@/components/lib/hooks"; import { useEffect } from "react"; import { useRouter } from "next/navigation"; import {Suspense} from "react"; // import { PDFViewer } from "@react-pdf/renderer"; const KeikoInvoiceNoSSR = dynamic(() => import("./KeikoInvoice"), { loading: () =>

Loading...

});

const PDFViewer = dynamic( () => import("@react-pdf/renderer").then((mod) => mod.PDFViewer), { ssr: false, loading: () =>

Loading...

, } );

export default function InvoicePage() { const carts = useAppSelector((state) => state.cart?.items); const customer = useAppSelector((state) => state.cart?.customer); const company = useAppSelector((state) => state.cart?.companyPayment); const router = useRouter(); useEffect(() => { console.log("carts invoice ", carts); }, [carts]);

try { return (

);

} catch (error) { console.log("error ", error); } }

Screenshots If applicable, add screenshots to help explain your problem. info - Need to disable some ESLint rules? Learn more here: https://nextjs.org/docs/basic-features/eslint#disabling-rules ✓ Linting and checking validity of types
✓ Collecting page data
Generating static pages (0/13) [= ]Error [ERR_REQUIRE_ESM]: require() of ES Module /Users/keikojuliakarya/Documents/Kerjaan/keikojulianextjswebsite/node_modules/@react-pdf/renderer/lib/react-pdf.js from /Users/keikojuliakarya/Documents/Kerjaan/keikojulianextjswebsite/.next/server/app/keikopos/invoice/page.js not supported. Instead change the require of react-pdf.js in /Users/keikojuliakarya/Documents/Kerjaan/keikojulianextjswebsite/.next/server/app/keikopos/invoice/page.js to a dynamic import() which is available in all CommonJS modules. at TracingChannel.traceSync (node:diagnostics_channel:315:14) at mod.require (/Users/keikojuliakarya/Documents/Kerjaan/keikojulianextjswebsite/node_modules/next/dist/server/require-hook.js:65:28) at 22721 (/Users/keikojuliakarya/Documents/Kerjaan/keikojulianextjswebsite/.next/server/app/keikopos/invoice/page.js:1:833) at t (/Users/keikojuliakarya/Documents/Kerjaan/keikojulianextjswebsite/.next/server/webpack-runtime.js:1:128) { code: 'ERR_REQUIRE_ESM', digest: '622129184' }

Error occurred prerendering page "/keikopos/invoice". Read more: https://nextjs.org/docs/messages/prerender-error

Error [ERR_REQUIRE_ESM]: require() of ES Module /Users/keikojuliakarya/Documents/Kerjaan/keikojulianextjswebsite/node_modules/@react-pdf/renderer/lib/react-pdf.js from /Users/keikojuliakarya/Documents/Kerjaan/keikojulianextjswebsite/.next/server/app/keikopos/invoice/page.js not supported. Instead change the require of react-pdf.js in /Users/keikojuliakarya/Documents/Kerjaan/keikojulianextjswebsite/.next/server/app/keikopos/invoice/page.js to a dynamic import() which is available in all CommonJS modules. at TracingChannel.traceSync (node:diagnostics_channel:315:14) at mod.require (/Users/keikojuliakarya/Documents/Kerjaan/keikojulianextjswebsite/node_modules/next/dist/server/require-hook.js:65:28) at 22721 (/Users/keikojuliakarya/Documents/Kerjaan/keikojulianextjswebsite/.next/server/app/keikopos/invoice/page.js:1:833) at t (/Users/keikojuliakarya/Documents/Kerjaan/keikojulianextjswebsite/.next/server/webpack-runtime.js:1:128) ✓ Generating static pages (13/13)

Export encountered errors on following paths: /keikopos/invoice/page: /keikopos/invoice

Desktop (please complete the following information):

• OS: [e.g. MacOS, Windows]
• Browser [e.g. chrome, safari]
• React-pdf version [e.g. v1.1.0]

[rago4]

This appears to be a Next.js-specific implementation issue rather than a react-pdf problem. I've successfully used react-pdf with Next.js by following a specific pattern for dynamic imports.

Here's a working example:

// my-component.jsx
import { PDFViewer } from '@react-pdf/renderer'

export function MyComponent() {
  return <PDFViewer />
}

// page.jsx
import dynamic from 'next/dynamic'

const MyComponent = dynamic(
  () => import('@/path/to/my-component').then((mod) => mod.MyComponent),
  { ssr: false }
)

export default function Page() {
  return <MyComponent />
}