fix: build and dynamic import

package.json

@@ -36,7 +36,7 @@
     "currency.js": "2.0.4",
     "date-fns": "4.1.0",
     "framer-motion": "11.11.7",
-    "next": "14.2.14",
+    "next": "14.2.8",
     "postcss": "8.4.47",
     "react": "18.3.1",
     "react-dom": "18.3.1",

src/app/PDFDocument.tsx → src/app/PdfDocument.tsx

@@ -1,12 +1,19 @@
-'use client';
-
 import { Table, TD, TH, TR } from '@ag-media/react-pdf-table';
 import { Document, Font, Link, Page, Text, View } from '@react-pdf/renderer';
 import currency from 'currency.js';
 import { format, parseISO } from 'date-fns';
 import { createTw } from 'react-pdf-tailwind';
 
-import { InvoiceFormValues } from '@/app/invoice-form';
+import { InvoiceFormValues } from '@/app/validation';
+
+const formatCurrency = (amount: number, currency: string) => {
+  return new Intl.NumberFormat('en-US', {
+    style: 'currency',
+    currency: currency,
+    minimumFractionDigits: 2,
+    maximumFractionDigits: 2,
+  }).format(amount);
+};
 
 Font.register({
   family: `DM Sans`,
@@ -38,29 +45,24 @@ const tw = createTw({
   },
 });
 
-const formatCurrency = (amount: number, currency: string) => {
-  return new Intl.NumberFormat('en-US', {
-    style: 'currency',
-    currency: currency,
-    minimumFractionDigits: 2,
-    maximumFractionDigits: 2,
-  }).format(amount);
+type InvoiceData = InvoiceFormValues & {
+  invoice_id: string;
 };
 
-export function PDFDocument({
-  bill_to,
-  bill_to_address,
-  company_address,
-  company_name,
-  currency: invoiceCurrency = 'USD',
-  due_date,
-  notes,
-  vat_id,
-  services = [],
-  invoice_id,
-}: InvoiceFormValues & {
-  invoice_id: string;
-}) {
+export function PdfDocument({ invoice }: { invoice: InvoiceData }) {
+  const {
+    bill_to,
+    bill_to_address,
+    company_address,
+    company_name,
+    currency: invoiceCurrency = 'USD',
+    due_date,
+    notes,
+    vat_id,
+    services = [],
+    invoice_id,
+  } = invoice;
+
   const currentDate = new Date();
 
   const total = services

src/app/invoice-form.tsx

@@ -5,9 +5,8 @@ import { zodResolver } from '@hookform/resolvers/zod';
 import { pdf } from '@react-pdf/renderer';
 import { useState } from 'react';
 import { SubmitHandler, useFieldArray, useForm } from 'react-hook-form';
-import { z } from 'zod';
 
-import { PDFDocument } from '@/app/PDFDocument';
+import { InvoiceFormValues, invoiceSchema } from '@/app/validation';
 import { Button } from '@/lib/ui/button';
 import { Description, ErrorMessage, Field, FieldGroup, Fieldset, Label, Legend } from '@/lib/ui/fieldset';
 import { Input } from '@/lib/ui/input';
@@ -21,31 +20,6 @@ const generateInvoiceId = () => {
   return `${prefix}-${timestamp}`.toUpperCase();
 };
 
-const formSchema = z.object({
-  due_date: z
-    .string()
-    .min(10, {
-      message: 'Due date is required',
-    })
-    .max(10),
-  company_name: z.string().min(3, { message: 'Company name is required' }),
-  company_address: z.string().min(3, { message: 'Company address is required' }),
-  bill_to: z.string().min(3, { message: 'Client name is required' }),
-  bill_to_address: z.string().min(3, { message: 'Client address is required' }),
-  currency: z.string().min(3, { message: 'Currency is required' }),
-  vat_id: z.string().optional(),
-  services: z.array(
-    z.object({
-      description: z.string().min(3, { message: 'Description is required' }),
-      quantity: z.string().optional().default('1'),
-      amount: z.string().min(1, { message: 'Amount is required' }),
-    })
-  ),
-  notes: z.string().optional(),
-});
-
-export type InvoiceFormValues = z.infer<typeof formSchema>;
-
 export function InvoiceForm() {
   const [isGenerating, setIsGenerating] = useState(false);
 
@@ -55,7 +29,7 @@ export function InvoiceForm() {
     handleSubmit,
     formState: { errors },
   } = useForm<InvoiceFormValues>({
-    resolver: zodResolver(formSchema),
+    resolver: zodResolver(invoiceSchema),
     defaultValues: {
       services: [{ description: '', quantity: '1', amount: '' }],
     },
@@ -70,7 +44,15 @@ export function InvoiceForm() {
     setIsGenerating(true);
     try {
       const invoiceId = generateInvoiceId();
-      const blob = await pdf(<PDFDocument {...data} invoice_id={invoiceId} />).toBlob();
+      const { PdfDocument } = await import('@/app/PdfDocument');
+      const blob = await pdf(
+        <PdfDocument
+          invoice={{
+            ...data,
+            invoice_id: invoiceId,
+          }}
+        />
+      ).toBlob();
       const url = URL.createObjectURL(blob);
       const link = document.createElement('a');
       link.href = url;
@@ -241,7 +223,7 @@ export function InvoiceForm() {
       </Fieldset>
 
       <Button type="submit" className="mt-10" disabled={isGenerating}>
-        {isGenerating ? 'Generating PDF...' : 'Download PDF'}
+        Download PDF
       </Button>
     </form>
   );

src/app/validation.ts

@@ -0,0 +1,26 @@
+import { z } from 'zod';
+
+export const invoiceSchema = z.object({
+  due_date: z
+    .string()
+    .min(10, {
+      message: 'Due date is required',
+    })
+    .max(10),
+  company_name: z.string().min(3, { message: 'Company name is required' }),
+  company_address: z.string().min(3, { message: 'Company address is required' }),
+  bill_to: z.string().min(3, { message: 'Client name is required' }),
+  bill_to_address: z.string().min(3, { message: 'Client address is required' }),
+  currency: z.string().min(3, { message: 'Currency is required' }),
+  vat_id: z.string().optional(),
+  services: z.array(
+    z.object({
+      description: z.string().min(3, { message: 'Description is required' }),
+      quantity: z.string().optional().default('1'),
+      amount: z.string().min(1, { message: 'Amount is required' }),
+    })
+  ),
+  notes: z.string().optional(),
+});
+
+export type InvoiceFormValues = z.infer<typeof invoiceSchema>;

tsconfig.json

@@ -6,6 +6,7 @@
     "skipLibCheck": true,
     "strict": true,
     "forceConsistentCasingInFileNames": true,
+    "allowSyntheticDefaultImports": true,
     "noEmit": true,
     "esModuleInterop": true,
     "module": "esnext",