Issue with Node generation under next new appDir

[grinnfold]

Hey 👋 , I'm not entirely sure on whose side this is, but I'm trying to generate a pdf server side using the next's beta appDir, and getting an error:

at $$$reconciler (webpack-internal:///(sc_server)/./node_modules/@react-pdf/renderer/lib/react-pdf.cjs.js:631:50)
    at createRenderer (webpack-internal:///(sc_server)/./node_modules/@react-pdf/renderer/lib/react-pdf.cjs.js:3889:12)
    at pdf (webpack-internal:///(sc_server)/./node_modules/@react-pdf/renderer/lib/react-pdf.cjs.js:3997:28)
    at _callee$ (webpack-internal:///(sc_server)/./node_modules/@react-pdf/renderer/lib/react-pdf.cjs.js:4189:32)
    at tryCatch (webpack-internal:///(sc_server)/./node_modules/@babel/runtime/helpers/regeneratorRuntime.js:36:25)
    at Generator.eval (webpack-internal:///(sc_server)/./node_modules/@babel/runtime/helpers/regeneratorRuntime.js:120:30)
    at Generator.eval [as next] (webpack-internal:///(sc_server)/./node_modules/@babel/runtime/helpers/regeneratorRuntime.js:64:29)
    at asyncGeneratorStep (webpack-internal:///(sc_server)/./node_modules/@babel/runtime/helpers/asyncToGenerator.js:4:28)
    at _next (webpack-internal:///(sc_server)/./node_modules/@babel/runtime/helpers/asyncToGenerator.js:22:17)
    at eval (webpack-internal:///(sc_server)/./node_modules/@babel/runtime/helpers/asyncToGenerator.js:27:13)
    at new Promise (<anonymous>)
    at eval (webpack-internal:///(sc_server)/./node_modules/@babel/runtime/helpers/asyncToGenerator.js:19:16)
    at renderToStream (webpack-internal:///(sc_server)/./node_modules/@react-pdf/renderer/lib/react-pdf.cjs.js:4202:21)
    at renderToBuffer (webpack-internal:///(sc_server)/./node_modules/@react-pdf/renderer/lib/react-pdf.cjs.js:4235:12)

here is the responsible code:

export const doc = () => {
  return renderToBuffer(
    <Document pageLayout="oneColumn">
      <Page size="A4" style={styles.page}>
        <Text>tete</Text>
      </Page>
    </Document>
  );
};

called in a route.ts:

export const GET = () => {
    //...
    const stream = await doc();

    return new Response(stream, {
      headers: {
        "Content-Disposition": `attachment; filename="test.pdf"`,
      },
    });
  }

I tested both with swcMinify on and off, within appDir and outside. It does the same with the other node rendering methods.

Expected behavior The stream or buffer is created

Desktop:

• Mac os m1 pro 13.2.1
• node 16
• React-pdf version 3.1.9

PS: great work, I tried in the front end and it works great !

[AlejandroBaldwin]

Hey, how did you implement it in the front end? Do you mind sharing your nextjs version? I'm trying to implement it in the front end and I keep getting stuck

[grinnfold]

next v 13.3.1 (I tried on canary but they're currently really unstable) it the front end, you must avoid SSR and go for a dynamic NoSSR component for the whole Document like described in there: https://stackoverflow.com/a/57173209

[OverGlass]

@grinnfold did you find a workaround ?