Typescript Error: 'Canvas' cannot be used as a JSX component.

[bartgrundeken]

I have created a Vite React app using the react-ts template, then included the demo code in main.tsx:

import { createRoot } from 'react-dom/client'
import { Canvas } from '@react-three/fiber'
import './root.css'

function App() {
    return (
        <div id='canvas-container'>
            <div id='canvas-container'>
                <Canvas>
                    <mesh>
                        <ambientLight intensity={0.1} />
                        <directionalLight color='red' position={[0, 0, 5]} />
                        <boxGeometry args={[2, 2, 2]} />
                        <meshStandardMaterial />
                    </mesh>
                </Canvas>
            </div>
        </div>
    )
}

createRoot(document.getElementById('root')!).render(<App />)

root.css only includes some sizing and margin styling for #canvas-container.

The example runs fine but VSCode complains, and after running tsc, I get this error:

src/main.tsx:9:18 - error TS2786: 'Canvas' cannot be used as a JSX component.
  Its type 'ForwardRefExoticComponent<Props & RefAttributes<HTMLCanvasElement>>' is not a valid JSX element type.
    Type 'ForwardRefExoticComponent<Props & RefAttributes<HTMLCanvasElement>>' is not assignable to type '(props: any, deprecatedLegacyContext?: any) => ReactNode'.
      Type 'ReactElement<any, string | JSXElementConstructor<any>> | null' is not assignable to type 'ReactNode'.
        Type 'ReactElement<any, string | JSXElementConstructor<any>>' is not assignable to type 'ReactNode'.
          Property 'children' is missing in type 'ReactElement<any, string | JSXElementConstructor<any>>' but required in type 'ReactPortal'.

9                 <Canvas>
                   ~~~~~~

  ../../node_modules/.pnpm/@types+react@18.2.55/node_modules/@types/react/index.d.ts:326:9
    326         children: ReactNode;
                ~~~~~~~~
    'children' is declared here.

These are my deps:

"dependencies": {
        "@react-three/fiber": "^8.15.16",
        "react": "^18.2.0",
        "react-dom": "^18.2.0",
        "three": "^0.161.0"
},
"devDependencies": {
        "@types/react": "^18.2.55",
        "@types/react-dom": "^18.2.19",
        "@types/three": "^0.161.2",
        "@vitejs/plugin-react": "^4.2.1",
        "typescript": "^5.2.2",
        "vite": "^5.1.0"
 }

Putting {/* @ts-ignore */} above the Canvas element silences the error (obviously) but that is of course a very poor workaround.

[huydqdev]

i have same problems in react native. Because it is not compatible with typescript version. There are many ways to fix it but you can try this. it works for me

your case "resolutions": { "@types/react": "~18.2.55" },

[bartgrundeken]

i have same problems in react native. Because it is not compatible with typescript version. There are many ways to fix it but you can try this. it works for me your case "resolutions": { "@types/react": "~18.2.55" },

Thanks for the response. I have since moved away from using this library (because in the end it did not fit our use case, not because of this issue) but hopefully others can use this.

[CodyJasonBennett]

What does your TSConfig look like? I'll try the React TS template.

[1216892614]

just use "jsx": "react-jsx", in tsconfig.json can help.

[CodyJasonBennett]

Sounds related to #3270.

[bartgrundeken]

What does your TSConfig look like? I'll try the React TS template.

Sorry for the late reply @CodyJasonBennett

{
    "$schema": "https://json.schemastore.org/tsconfig",
    "display": "Default",
    "compileOnSave": false,
    "compilerOptions": {
        "allowSyntheticDefaultImports": true,
        "declaration": false,
        "emitDecoratorMetadata": true,
        "experimentalDecorators": true,
        "importHelpers": true,
        "jsx": "react-jsx",
        "lib": ["es2017", "dom"],
        "module": "esnext",
        "moduleResolution": "node",
        "outDir": "out-tsc",
        "skipDefaultLibCheck": true,
        "skipLibCheck": true,
        "sourceMap": true,
        "strictNullChecks": true,
        "target": "es2017"
    },
    "exclude": ["node_modules", "tmp"]
}

The project is created from a standard vite-react-ts app.