React-pdf: <DOCUMENT /> is using incorrect casing. Use PascalCase for React components, or lowercase for HTML elements.

[FrimJo]

OS:
macOS Mojave Version 10.14.1

React-pdf version:
1.0.0-alpha.25
React 16.6.3

Related

239

Description:
I'm trying to render a <Document> using @react-pdf/renderer, but get the error <DOCUMENT /> is using incorrect casing. Use PascalCase for React components, or lowercase for HTML elements.

How to replicate issue including code snippet (if applies):
npx create-react-app pdf-app
cd pdf-app
yarn install @react-pdf/renderer
import { Document } from '@react-pdf/renderer'
add <Document /> to App component
yarn start

Other
Downgrading to React 16.4.1 fixes the problem.

[diegomura]

I was just checking, and this is happening when you are forgetting to wrap a document in a PDFViewer, PDFDownloadLink or BlobProvider, so the elements are rendered by react-dom, causing that warning. This is now mandatory for web environments.
Will try to add a warning message, but not sure if it's possible.

[JIACHENG135]

I met this issue too. The solution to solve this error is very easy. By the way I'm using TypeScript with this tool. Please also import PDFViewer from @react-pdf/renderer and wrap into the tag. Hope this post can help someone in the future.

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

...
    return (
      <div style={{ position: 'relative', height: '100%' }}>
        <div>
          <PDFViewer>
            <Document>
              <Page />
            </Document>
          </PDFViewer>
          <p>Page</p>
        </div>
      </div>
    )


...