Warning: is using incorrect casing. Use PascalCase for React components, or lowercase for HTML elements

Question

console.error node_modules/react-dom/cjs/react-dom.development.js:506 Warning: is using incorrect casing. Use PascalCase for React components, or lowercase for HTML elements.

I have the issue with Jest and react-pdf

Answer 1

In React(Native/JS) world you must name your component in PascalCase, PascalCase is a naming convention in which the first letter of each word in a compound word is capitalized. Software developers often use PascalCase when writing source code to name functions, classes, and other objects. PascalCase is similar to camelCase, except the first letter in PascalCase is always capitalized.

So you must name your components like these:

function MyFnComp(props) {
.
.
.
}

class MyClsComp extentds React.Component {
.
.
.
}

export function App(){
  return (
    <MyFnComp />
    <MyClsComp />
    {/*Using lowercase for HTML elements:*/}
    <div> This is a HTML native element! </div>
  )
}

Answer 2

In my case was I forgot the .js extension in the component file name. It's funny that it compiles fine but throw that exception a runtime.

Jus posting this here cause I just keep comming to this SO question when I made the same mistake again.

Answer 3

Wrap your Document inside PDFViewer.

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

Answer 4

Try this, change your component physical name to View (first character upper case), then rename all of your imports to View as well, then restart your visual code, I hope it works for you