GitHub Actions Build Error with @react-pdf/renderer Components

57 Views Asked by At

I've been attempting to automate my build process on a server using GitHub Actions. My npm run build command runs successfully on my local machine, but I'm encountering issues on the server when importing components that utilize @react-pdf/renderer.

Here's a snippet of the code I'm working with:

import { useEffect, useState } from 'react'
import { Document, Font, Page, PDFViewer, StyleSheet, Text, View } from '@react-pdf/renderer'
import { BoletaHeader, InfoBoleta, InvoiceSummary, TablePdf } from '@components/Facturacion/Pdf'

Font.register({
  family: 'Open Sans',
  fonts: [
    { src: 'https://cdn.jsdelivr.net/npm/[email protected]/fonts/open-sans-regular.ttf' },
    {
      src: 'https://cdn.jsdelivr.net/npm/[email protected]/fonts/open-sans-700.ttf',
      fontWeight: 700
    }
  ]
})
const invoice = MOCK_INVOICE_DATA[0]
const Boleta = () => {
  const [isClient, setisClient] = useState(false)

  useEffect(() => {
    setisClient(true)
  }, [])

  return isClient ? (
    <PDFViewer style={{ width: '100%', height: '100vh' }}>
      <Document title='Boleta'>
        <Page>
          <View style={styles.container}>
            <BoletaHeader />
            <InfoBoleta />
            <View style={styles.tableContainer}>
              <TablePdf invoice={invoice} />
              <InvoiceSummary invoice={invoice} />
    //...rest of the code

const styles = StyleSheet.create({
  // [..styles here..]
})

The primary problem seems to be related to the @react-pdf/renderer components. When I try to run the build on the server, it fails to import these components, thereby preventing the build from completing. So, once I retire this component from my project it builds ok

I would appreciate your help.

Next js version : 13.4.4 @react-pdf/renderer: 3.1.12 typescript": "5.0.4

The only solution that I have encountered is to remove the page that is rendering the the pdf viewere

0

There are 0 best solutions below