nextjs 中的 React-pdf 不允许进行构建

Question

在创建文件并添加代码后，我在 nextjs 中使用react-pdf和react-pdf/renderer，它工作得很好，但是当我进行生产构建时，它会继续进行构建并且永远不会停止。这是代码

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


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

    return (
        <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>
        
      );
}
 
export default PDFGenerator;

我在这里使用它

                 <PDFDownloadLink
                    document={<PDFGenerator/>}
                    fileName="recipe.pdf"
                    className="button-background w-full text-center text-color py-2 px-4 
                     rounded mt-10">
                    {({blob, url, loading, error}) => (loading

                        ? 'Loading document...'
                        : 'Download PDF')}
                </PDFDownloadLink>

Answer 1

也许react-pdfSSR不支持？

尝试使用动态导入并查看是否可以解决您的问题：

import React, { useState } from 'react';
import { PDFDownloadLink } from '@react-pdf/renderer';

// Lazily import when rendered on UI
const PDFGenerator = React.lazy(() => import('./PDFGenerator'));

const DownloadPDF = () => {
  const [showPDF, setShowPDF] = useState(false);

  return (
    <>
      <button onClick={() => setShowPDF(true)}>Download PDF</button>
      {showPDF && (
        <React.Suspense fallback="Loading...">
          <PDFDownloadLink
            document={<PDFGenerator />}
            fileName="recipe.pdf"
            className="button-background w-full text-center text-color py-2 px-4 
            rounded mt-10"
          >
            {({ blob, url, loading, error }) =>
              loading ? 'Loading document...' : 'Download PDF'
            }
          </PDFDownloadLink>
        </React.Suspense>
      )}
    </>
  );
};

export default DownloadPDF;