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