React PDF + Vite implementation Error: Uncaught SyntaxError

Question

I'm trying to use the React PDF lib in a project that react created with Vite.

I'm having problems rendering the PDF component and the error is very weird, could someone help me?

Error

Uncaught SyntaxError: The requested module '/node_modules/.vite/@react-pdf_renderer.js?v=3e3d2b30' does not provide an export named 'Document' PDFDocument.tsx:2

// PDFDocument.tsx

import React from 'react';
import { Page, Text, View, Document, StyleSheet } from '@react-pdf/renderer';

// Create styles
const styles = StyleSheet.create({
  page: {
    flexDirection: 'row',
    backgroundColor: '#E4E4E4'
  },
  section: {
    margin: 10,
    padding: 10,
    flexGrow: 1
  }
});

// Create Document Component
export const PDFDocument = () => (
<Document>
  <Page size="A4" style={styles.page}>
    <View style={styles.section}>
      <Text>Section #1</Text>
    </View>
    <View style={styles.section}>
      <Text>Section #2</Text>
    </View>`
  </Page>`
</Document>`
);

// Document.tsx

import { Box, Button, Flex, Heading, Icon} from '@chakra-ui/react';
import React, { useState } from 'react'; 
import { RiArrowLeftLine } from 'react-icons/ri'; 
import { useNavigate, useParams } from 'react-router-dom'; 
import { PDFDocument } from '../../components/Document/PDFDocument';
import { Header } from '../../components/Header';
    
interface PageNumber { numPages: number | null; } 

export function UserDocument() { 
  const navigate = useNavigate() 
  const { documentId } = useParams()
  
  return ( 
    <Flex direction='column' h='100vh'> 
      <Header />  
      <Flex w='100%' my='6' maxW={1480} mx='auto' px='6'>
        <Flex flexDir='column' w='100%' my='6' maxW={1480} mx='auto' px='6'>
          <Flex
            align='center'
            flexDir='row'
            gap='4'
            mb='6'
          >
              <Button
                onClick={() => navigate(-1)}
                cursor='pointer'
                as="a"
                size='lg'
                fontSize='sm'
                colorScheme='blackAlpha'
                leftIcon={<Icon fontSize='20' as={RiArrowLeftLine}/>}
                >Go back</Button>
            <Heading
              alignSelf='center'
            >Document</Heading>
    
    
          </Flex>
    
          <Box
              p={['6', '8']}
              bg='gray.800'
              borderRadius={8}
              pb='4'
            >
              <PDFDocument />
              
            </Box>
          ); 
    }
            
          </Flex>
      </Flex>
    </Flex>

I tried to install some Vite plugins but I couldn't, I followed the official React PDF documentation.

https://react-pdf.org/

Answer 1

I had the same issue and vite plugins don't work currently. I fixed this import error with this, adding a file "reactPdf.js" like follows to my project that "converts" the default export to named exports:

import pdf from '@react-pdf/renderer'

export const StyleSheet = pdf.StyleSheet
export const Font = pdf.Font

// https://react-pdf.org/components
export const Document = pdf.Document
export const Page = pdf.Page
export const Image = pdf.Image
export const View = pdf.View
export const Text = pdf.Text
export const Link = pdf.Link
export const Note = pdf.Note
export const Canvas = pdf.Canvas

// https://react-pdf.org/svg
export const Svg = pdf.Svg
export const Line = pdf.Line
export const Polyline = pdf.Polyline
export const Polygon = pdf.Polygon
export const Path = pdf.Path
export const Rect = pdf.Rect
export const Circle = pdf.Circle
export const Ellipse = pdf.Ellipse
// export const Text = pdf.Text
export const Tspan = pdf.Tspan
export const G = pdf.G
export const Stop = pdf.Stop
export const Defs = pdf.Defs
export const ClipPath = pdf.ClipPath
export const LinearGradient = pdf.LinearGradient
export const RadialGradient = pdf.RadialGradient

And then I can import from that file normally:

import { Document, Page, Text } from './reactPdf.js'

I got help from git hub name @carlobeltrame in this page https://github.com/diegomura/react-pdf/issues/1317

Answer 2

Have you followed all steps in the right order?

yarn package

yarn add --dev vite-plugin-shim-react-pdf

vite.config.js modifications

import { defineConfig } from "vite";
import reactRefresh from "@vitejs/plugin-react-refresh";
import shimReactPdf from "vite-plugin-shim-react-pdf";

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [reactRefresh(), shimReactPdf()],
});

imports

import pdf from "@react-pdf/renderer";
const { Document, Text, View, StyleSheet } = pdf;