Failed to Load PDF: 500 Internal Server Error

famousprince commented 7 months ago

Just forked and deployed on Vercel, not even set up the optional $PRIVATE_KEY environment variable.

Vercel Functions log told me this:

Error: Unknown font format
    at Module.$d636bc798e7178db$export$185802fd694ee1f5 (file:///var/task/node_modules/fontkit/dist/module.mjs:41:11)
    at FontSource._callee2$ (file:///var/task/node_modules/@react-pdf/font/lib/index.js:106:33)
    at tryCatch (/var/task/node_modules/@babel/runtime/helpers/regeneratorRuntime.js:45:16)
    at Generator.<anonymous> (/var/task/node_modules/@babel/runtime/helpers/regeneratorRuntime.js:133:17)
    at Generator.next (/var/task/node_modules/@babel/runtime/helpers/regeneratorRuntime.js:74:21)
    at asyncGeneratorStep (/var/task/node_modules/@babel/runtime/helpers/asyncToGenerator.js:3:24)
    at _next (/var/task/node_modules/@babel/runtime/helpers/asyncToGenerator.js:22:9)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
 ⨯ Error: Unknown font format
    at Module.$d636bc798e7178db$export$185802fd694ee1f5 (file:///var/task/node_modules/fontkit/dist/module.mjs:41:11)
    at FontSource._callee2$ (file:///var/task/node_modules/@react-pdf/font/lib/index.js:106:33)
    at tryCatch (/var/task/node_modules/@babel/runtime/helpers/regeneratorRuntime.js:45:16)
    at Generator.<anonymous> (/var/task/node_modules/@babel/runtime/helpers/regeneratorRuntime.js:133:17)
    at Generator.next (/var/task/node_modules/@babel/runtime/helpers/regeneratorRuntime.js:74:21)
    at asyncGeneratorStep (/var/task/node_modules/@babel/runtime/helpers/asyncToGenerator.js:3:24)
    at _next (/var/task/node_modules/@babel/runtime/helpers/asyncToGenerator.js:22:9)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
Error: Unknown font format
    at Module.$d636bc798e7178db$export$185802fd694ee1f5 (file:///var/task/node_modules/fontkit/dist/module.mjs:41:11)
    at FontSource._callee2$ (file:///var/task/node_modules/@react-pdf/font/lib/index.js:106:33)
    at tryCatch (/var/task/node_modules/@babel/runtime/helpers/regeneratorRuntime.js:45:16)
    at Generator.<anonymous> (/var/task/node_modules/@babel/runtime/helpers/regeneratorRuntime.js:133:17)
    at Generator.next (/var/task/node_modules/@babel/runtime/helpers/regeneratorRuntime.js:74:21)
    at asyncGeneratorStep (/var/task/node_modules/@babel/runtime/helpers/asyncToGenerator.js:3:24)
    at _next (/var/task/node_modules/@babel/runtime/helpers/asyncToGenerator.js:22:9)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
Error: Runtime exited with error: exit status 1
Runtime.ExitError

How do we solve this problem?

colinhemphill commented 7 months ago

@famousprince I've never encountered this deploying to Vercel and I'm not able to reproduce the issue. There has been some discussion about the error in the React PDF repo but from the best I can gather the resume repo is set up the recommended way.

Do you have any changes to the repo, e.g. different fonts? Are the fonts I provided correctly loaded into /public/fonts?

colinhemphill commented 7 months ago

@famousprince It basically comes down to the fact that you need an absolute path to a font file, and the file has to be .ttf. So either you're not pointing to a TTF or you're pointing to a file that doesn't exist.

If local files aren't working, you could try pointing to CDN files from Google, e.g.:

const albertSrc = 'https://fonts.gstatic.com/s/albertsans/v1';
const jetbrainsSrc = 'https://fonts.gstatic.com/s/jetbrainsmono/v18';

Font.register({
  family: 'Albert Sans',
  fonts: [
    {
      fontStyle: 'normal',
      fontWeight: 400,
      src: `${albertSrc}/i7dZIFdwYjGaAMFtZd_QA3xXSKZqhr-TenSHq5P_rI32TxAj1g.ttf`,
    },
    {
      fontStyle: 'italic',
      fontWeight: 400,
      src: `${albertSrc}/i7dfIFdwYjGaAMFtZd_QA1Zeelmy79QJ1HOSY9AX74fybRUz1r5t.ttf`,
    },
    {
      fontStyle: 'normal',
      fontWeight: 700,
      src: `${albertSrc}/i7dZIFdwYjGaAMFtZd_QA3xXSKZqhr-TenSHTJT_rI32TxAj1g.ttf`,
    },
    {
      fontStyle: 'italic',
      fontWeight: 700,
      src: `${albertSrc}/i7dfIFdwYjGaAMFtZd_QA1Zeelmy79QJ1HOSY9Dw6IfybRUz1r5t.ttf`,
    },
  ],
});

Font.register({
  family: 'JetBrains Mono',
  fonts: [
    {
      fontStyle: 'normal',
      fontWeight: 500,
      src: `${jetbrainsSrc}/tDbY2o-flEEny0FZhsfKu5WU4zr3E_BX0PnT8RD8yKxjPVmUsaaDhw.ttf`,
    },
  ],
});

colinhemphill commented 7 months ago

https://github.com/colinhemphill/nextjs-resume/pull/478

famousprince commented 7 months ago

Thank you Colin! I updated the PDF.tsx to https://github.com/colinhemphill/nextjs-resume/blob/0b583b8cf3f932e58e81479868ce40767c6f34b7/src/components/PDF/PDF.tsx then it works well.

colinhemphill commented 7 months ago

@famousprince Awesome, I'll probably switch to using the CDN fonts as the default instead of local files.

colinhemphill / nextjs-resume

Failed to Load PDF: 500 Internal Server Error #471