<DOCUMENT /> is using incorrect casing. Use PascalCase for React components, or lowercase for HTML elements. [bug help wanted]

[kenchiu100]

I can't use the imported tags even though I can run the server. The pdf is not formed correctly from using the react-pdf library. I got these warnings.

Why is it say I am using wrong casing? My code seems ok.

Thanks in advance!

[rogierslag]

Pass the final React code through the renderer for PDF, not react-dom

[jbovenschen]

@kenchiu100 Can you please share the code where you render the imported component MyDocument?

[kenchiu100]

@rogierslag Thanks for answering but I thought ReactPDF.render is for saving in a file, and ReactDOM.render is for displaying the created pdf on the browser. I want to display the generated pdf on the browser. @jbovenschen sure. I use create-react-app as a starter. I import the MyDocument component to App.js. Then I import App to index.js. Then I render at index.js This is App.js

This is index.js

I also upload the zip here. https://www.dropbox.com/s/pnvdq2zrkoltef4/pdfapp.zip?dl=0

[rogierslag]

In that case you should use the react-pdf-dom binding to render to a stream or buffer, and use a React PDF viewer to show the file (or offer it for download). ReactDOM will render to HTML, and as PDF is not HTML it will not work

[kenchiu100]

@rogierslag So the readme in this repo is wrong? https://github.com/diegomura/react-pdf#render-in-dom It says I could do ReactDOM.render. Could you elaborate how I can use the react-pdf-dom binding to render to a stream or buffer? Any examples I can follow along? Thanks!

[junbinku]

I'm having same issue on this! Any solution?

[webshared]

DOM render did not work well for me, and what I needed it to create downloadable PDF file.

After looking through source code I did the workaround, it uses core PDFRenderer to render to blob stream and then embeds as iframe. Also, the blob is downloadable.

https://gist.github.com/atolkachiov/dd2e257f669b1a5ca06e4f4514326d3b

[diegomura]

This error is because when used in the DOM, you should import Document from @react-pdf/dom:

import { Document } from '@react-pdf/dom';

I'll update the README. You can also use the snippet @atolkachiov uploaded if you need some more complex features. It's the same thing we are doing currently on the REPL

[FrimJo]

I'm having the same problem with "@react-pdf/renderer": "^1.0.0-alpha.25 I'm just 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.

It has been working fine earlier, and I haven't changed the version of @react-pdf/renderer.

Edit: I'm using React 16.6.3

[alundiak]

I'll update the README

@diegomura I still see in readme import { Document, Page, Text, View, StyleSheet } from '@react-pdf/renderer';

(btw, shouln't it be @react-pdf/core for JS/JSX?)

Anyhow, I did npm install @react-pdf/dom and it installed v0.7.6.

But:

Users/alund/.node-gyp/11.14.0/include/node/v8config.h:326:29: note: expanded from macro 'V8_DEPRECATED'
  declarator __attribute__((deprecated(message)))
                            ^
In file included from ../../nbind/src/reflect.cc:4:
In file included from ../../nbind/include/nbind/nbind.h:8:
In file included from ../../nbind/include/nbind/noconflict.h:8:
In file included from ../../nbind/include/nbind/BindDefiner.h:24:
../../nbind/include/nbind/v8/Int64.h:151:35: warning: 'Uint32Value' is deprecated: Use maybe version [-Wdeprecated-declarations]
                if(argc > 0) storage = args[0]->Uint32Value();
                                                ^
../../nbind/include/nbind/v8/Int64.h:193:58: note: in instantiation of function template specialization 'nbind::Int64Converter<8>::int64Init<long long>' requested here
DEFINE_INT64_BINDING_TYPE(signed long long, int64ToWire, int64Init);
                                                         ^
/Users/alund/.node-gyp/11.14.0/include/node/v8.h:2571:3: note: 'Uint32Value' has been explicitly marked deprecated here
  V8_DEPRECATED("Use maybe version", uint32_t Uint32Value() const);
  ^
/Users/alund/.node-gyp/11.14.0/include/node/v8config.h:326:29: note: expanded from macro 'V8_DEPRECATED'
  declarator __attribute__((deprecated(message)))
                            ^
In file included from ../../nbind/src/reflect.cc:4:
In file included from ../../nbind/include/nbind/nbind.h:8:
In file included from ../../nbind/include/nbind/noconflict.h:8:
In file included from ../../nbind/include/nbind/BindDefiner.h:24:
../../nbind/include/nbind/v8/Int64.h:152:58: warning: 'Uint32Value' is deprecated: Use maybe version [-Wdeprecated-declarations]
                if(argc > 1) storage += static_cast<uint64_t>(args[1]->Uint32Value()) << 32;
                                                                       ^
/Users/alund/.node-gyp/11.14.0/include/node/v8.h:2571:3: note: 'Uint32Value' has been explicitly marked deprecated here
  V8_DEPRECATED("Use maybe version", uint32_t Uint32Value() const);
  ^
/Users/alund/.node-gyp/11.14.0/include/node/v8config.h:326:29: note: expanded from macro 'V8_DEPRECATED'
  declarator __attribute__((deprecated(message)))
                            ^

I tried to import { Document } from '@react-pdf/dom'; But my build failed.

ERROR in ./node_modules/forever-agent/index.js
Module not found: Error: Can't resolve 'tls' in '/Users/alund/prj/cv/node_modules/forever-agent'
 @ ./node_modules/forever-agent/index.js 7:10-24
 @ ./node_modules/request/request.js
 @ ./node_modules/request/index.js
 @ ./node_modules/@react-pdf/core/lib/utils/font.js
 @ ./node_modules/@react-pdf/core/lib/font/index.js
 @ ./node_modules/@react-pdf/core/lib/index.js
 @ ./node_modules/@react-pdf/dom/lib/Document.js
 @ ./node_modules/@react-pdf/dom/lib/index.js
 @ ./src/components/v2/MyPdf.jsx
 @ ./src/components/App.jsx
 @ ./src/index.jsx

ERROR in ./node_modules/tunnel-agent/index.js
Module not found: Error: Can't resolve 'tls' in '/Users/alund/prj/cv/node_modules/tunnel-agent'
 @ ./node_modules/tunnel-agent/index.js 4:10-24
 @ ./node_modules/request/lib/tunnel.js
 @ ./node_modules/request/request.js
 @ ./node_modules/request/index.js
 @ ./node_modules/@react-pdf/core/lib/utils/font.js
 @ ./node_modules/@react-pdf/core/lib/font/index.js
 @ ./node_modules/@react-pdf/core/lib/index.js
 @ ./node_modules/@react-pdf/dom/lib/Document.js
 @ ./node_modules/@react-pdf/dom/lib/index.js
 @ ./src/components/v2/MyPdf.jsx
 @ ./src/components/App.jsx
 @ ./src/index.jsx

I use Node v11.14.0, React v16.8.6, Webpack v4.30, Babel v7.4.3.

• "@react-pdf/dom": "^0.7.6",
• "@react-pdf/renderer": "^1.5.4",

And I use React with JS/JSX, not TypeScript.

[diegomura]

/dom and / core packages are deprecated. Everything lies on /renderer now

[alundiak]

@diegomura But it (@react-pdf/renderer) doens't work :) So what ur suggestion? Why component created DOM elemnts as HTML tags?

ReactDevTool:

My JSX code like in ur readme :)

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

plus rest ...

from https://react-pdf.org/ I know about PDFViewer, and I tried, I don't want embed it, I wanna HTML/DOM of ReactJS code. PDF file is later, I will just download. For now I just want to render JSX as HTML/DOM on page. So I assumed to use ReactDOM.

[diegomura]

You cannot use the same react-pdf primitives to generate html/dom nodes. Yes, React will render them somehow because their names matches valid html nodes, but if you use react-pdf primitive on the web, they must be inside either PDFViewer, PDFDownloadLink or BlobProvider. Not completely sure what are you trying to achieve, but that's how the lib works. You can't have the same components for either the PDF and the web in such a straightforward way unfortunately

[jorgeoggonei]

Hello. Actually I have a similar problem. I got many errors related to PascalCase. @diegomura Looking your previous comment, I don't know if what i'm doing is wrong:

<div className="AppSection">
  <div>
    <PDFDownloadLink document={<MyDocument />} fileName="aqrReport.pdf">
      {({ blob, url, loading, error }) => (loading ? 'Loading document...' : 'Download now!')}
    </PDFDownloadLink>
  </div>

  <MyDocument />

  </div>
   <div className="AppSection">
      <PDFViewer>
        <MyDocument />
      </PDFViewer>
    </div>
</div>

By now, Im trying to show in html, prewiew and download the pdf. I tried deleting the pdf previewr, but the error is still showing.

[diegomura]

Could you provide the MyDocument definition and how are you importing elements from react-pdf. Also, please specify specifically what error are you having and what react-pdf version are you using. Is impossible to tell what's going on without more details

[jorgeoggonei]

Sorry. MyDocument is in the next js file:

I get the next warnings:

• is using incorrect casing. Use PascalCase for React components, or lowercase for HTML elements.
• Received true for a non-boolean attribute fixed.
• Invalid value for prop render on tag. Either remove it from the element, or pass a string or number value to keep it in the DOM.
• The tag is unrecognized in this browser. If you meant to render a React component, start its name with an uppercase letter.
• is using incorrect casing. Use PascalCase for React components, or lowercase for HTML elements.
• The tag is unrecognized in this browser. If you meant to render a React component, start its name with an uppercase letter.

react-pdf version: "@react-pdf/renderer": "^1.5.4",

Thanks.

[rogierslag]

How are you then using MyDocument? I think you are rendering it using ReactDom instead of ReactPDF to render.

You should for example use the following

import {ReactPDF} from '@reactpdf/renderer';
import MyDocument from './myDocument';

ReactPDF.renderToFile(<MyDocument />, '/tmp/example.pdf');

[jorgeoggonei]

@rogierslag By now yes. I'm using ReactDom, Calling ReactPDF I get the error "Module not found: Can't resolve '@reactpdf/renderer'"

My idea is to show in the web, the components, view, which i'm doing. And with this, I have a button to download the pdf. The PDFViewer is optional, currently I'm using it just to see and prove how my pdf sees.

So, I don't know if it's possible what I'm trying to do.

[rogierslag]

You shouldnt use ReactDOM to render, as that is intended for HTML. When rendering to the web, see the following part of the README https://github.com/diegomura/react-pdf#web-render-in-dom

[jorgeoggonei]

@rogierslag Thanks a lot.

[testacode]

Hi, I'm having the same issue. I'm trying to show on the latest CRA a pdf I already have in my server but I'm having this same issue. I don't want to create a new pdf file just load the one I have. I'm doing the following without success. It would be nice to have a simple and concrete example in the readme page to do this. I'm following this blog post.

import { Document, Page } from 'react-pdf/dist/esm/entry.webpack';

const [numPAges, setNumPages] = useState(null);
const [pageNumber, setPageNumber] = useState(1);

const onDocumentLoadSuccess = ({ numPages }) => {
    setNumPages({ numPages });
  };

return (
  <Document
    file="myFile.pdf"
    onLoadSuccess={onDocumentLoadSuccess}
  >
    <Page pageNumber={internalState.pageNumber} />
  </Document>
);

[IPWright83]

@rogierslag can I ask how you'd go about testing within Jest? I get the same errors about Pascal case when running tests using @testing-library/react.

If I wrap my test within a <PDFViewer> then I get:

PDFViewer is a web specific API. You're either using this component on Node, or your bundler is not loading react-pdf from the appropriate web build.

I'm trying to find a nice solution that doesn't output lots of noise during testing.

[sankaSanjeeva]

Need to wrap it by PDFViewer

    <PDFViewer>
      <Document>
        <Page size="A4" style={styles.page}>

        </Page>
      </Document>
    </PDFViewer>

[IPWright83]

@sankaSanjeeva As mentioned in my question, if you wrap a <PDFViewer> around the content in a test then you get the error around it being a web specific API that doesn't work in Node...