React PDF + Vite 实现错误：未捕获的 SyntaxError

Question

我正在尝试在使用 Vite 创建的反应项目中使用 React PDF 库。

我在渲染 PDF 组件时遇到问题，而且错误很奇怪，有人可以帮我吗？

错误

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>

我尝试安装一些 Vite 插件但我不能，我遵循了官方的 React PDF 文档。

https://react-pdf.org/

Answer 1

我有同样的问题，vite 插件目前不起作用。我用这个修复了这个导入错误，在我的项目中添加了一个如下所示的文件“reactPdf.js”，将默认导出“转换”为命名导出：

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

然后我可以正常从该文件导入：

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

我在此页面 https://github.com/diegomura/react-pdf/issues/1317 中从 git hub 名称 @carlobeltrame 获得了帮助

Answer 2

您是否按照正确的顺序执行了所有步骤？

纱包

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

vite.config.js 修改

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()],
});

进口

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

Answer 3

如果你得到与@jojagames 相同的错误那么你应该尝试更新你依赖于"@react-pdf/renderer":"^3.0.0" 和检查一次.如果错误仍然存​​在，例如 Uncaught TypeError: Cannot read properties of undefined (reading 'call') 或 Uncaught TypeError: EventEmitter3 is undefined ，请尝试以下步骤：

我的环境：

"@react-pdf/renderer": "^3.0.0",
"react": "^18.2.0",
"react-dom": "^18.2.0" 

解决方案：

1. 通过运行命令添加以下依赖项：

   yarn add --dev @esbuild-plugins/node-modules-polyfill @esbuild-plugins/node-globals-polyfill
   

   2. 更新 vite.config.js 文件：

   import {defineConfig} from 'vite'
   import react from '@vitejs/plugin-react'
   import {NodeGlobalsPolyfillPlugin} from '@esbuild-plugins/node-globals-polyfill'
   import {NodeModulesPolyfillPlugin} from '@esbuild-plugins/node-modules-polyfill'
   // You don't need to add this to deps, it's included by @esbuild-plugins/node-modules-polyfill
   import rollupNodePolyFill from 'rollup-plugin-node-polyfills'
   
   
   // https://vitejs.dev/config/
   export default defineConfig({
       plugins: [react()],
       resolve: {
           alias: {
               // This Rollup aliases are extracted from @esbuild-plugins/node-modules-polyfill,
               // see https://github.com/remorses/esbuild-plugins/blob/master/node-modules-polyfill/src/polyfills.ts
               // process and buffer are excluded because already managed
               // by node-globals-polyfill
               util: 'rollup-plugin-node-polyfills/polyfills/util',
               sys: 'util',
               events: 'rollup-plugin-node-polyfills/polyfills/events',
               stream: 'rollup-plugin-node-polyfills/polyfills/stream',
               path: 'rollup-plugin-node-polyfills/polyfills/path',
               querystring: 'rollup-plugin-node-polyfills/polyfills/qs',
               punycode: 'rollup-plugin-node-polyfills/polyfills/punycode',
               url: 'rollup-plugin-node-polyfills/polyfills/url',
               string_decoder:
                   'rollup-plugin-node-polyfills/polyfills/string-decoder',
               buffer: 'rollup-plugin-node-polyfills/polyfills/buffer-es6',
               process: 'rollup-plugin-node-polyfills/polyfills/process-es6',
               http: 'rollup-plugin-node-polyfills/polyfills/http',
               https: 'rollup-plugin-node-polyfills/polyfills/http',
               os: 'rollup-plugin-node-polyfills/polyfills/os',
               assert: 'rollup-plugin-node-polyfills/polyfills/assert',
               constants: 'rollup-plugin-node-polyfills/polyfills/constants',
               _stream_duplex:
                   'rollup-plugin-node-polyfills/polyfills/readable-stream/duplex',
               _stream_passthrough:
                   'rollup-plugin-node-polyfills/polyfills/readable-stream/passthrough',
               _stream_readable:
                   'rollup-plugin-node-polyfills/polyfills/readable-stream/readable',
               _stream_writable:
                   'rollup-plugin-node-polyfills/polyfills/readable-stream/writable',
               _stream_transform:
                   'rollup-plugin-node-polyfills/polyfills/readable-stream/transform',
               timers: 'rollup-plugin-node-polyfills/polyfills/timers',
               console: 'rollup-plugin-node-polyfills/polyfills/console',
               vm: 'rollup-plugin-node-polyfills/polyfills/vm',
               zlib: 'rollup-plugin-node-polyfills/polyfills/zlib',
               tty: 'rollup-plugin-node-polyfills/polyfills/tty',
               domain: 'rollup-plugin-node-polyfills/polyfills/domain'
           }
       },
       optimizeDeps: {
           esbuildOptions: {
               // Node.js global to browser globalThis
               define: {
                   global: 'globalThis'
               },
               // Enable esbuild polyfill plugins
               plugins: [
                   NodeGlobalsPolyfillPlugin({
                       process: true,
                       buffer: true
                   }),
                   NodeModulesPolyfillPlugin()
               ]
           }
       },
       build: {
           rollupOptions: {
               plugins: [
                   // Enable rollup polyfills plugin
                   // used during production bundling
                   rollupNodePolyFill()
               ]
           }
       }
   })
   

   好了，现在你应该可以使用@react-pdf/renderer 在 react 18 中的依赖与投票.我以前可以成功创建构建没有任何错误.这是github repo 供参考。

   为了有关使用 vite 的节点 polyfill 上的错误的更多信息，试试这个answer。

   Kudos to @fabiano-taioli, @jifus.