TS: All props required on Box, Circle, etc.

[strblr]

• three version: 0.128.0
• @react-three/fiber version: 6.2.0
• @react-three/drei version: 5.1.6
• node version: 14.15.4
• yarn version: 1.22.10

Problem description:

When using any predefined shape like Box or Circle, I get a TypeScript error saying that all props are required. The error shows up in intellisense and actual TS compilation (via CRA).

Relevant code:

import React from "react";
import { Canvas } from "@react-three/fiber";
import { Box } from "@react-three/drei";

export default function App() {
  return (
    <>
      <Canvas>
        <Box>
          <meshStandardMaterial attach="material" />
        </Box>
      </Canvas>
    </>
  );
}

TypeScript error in /src/App.tsx(9,10):
Type '{ children: Element; }' is missing the following properties from
 type 'Pick<Omit<MeshProps, "args"> & { args?: [width?: number | undef
ined, height?: number | undefined, depth?: number | undefined, widthSe
gments?: number | undefined, heightSegments?: number | undefined, dept
hSegments?: number | undefined] | undefined; }, "material" | ... 84 mo
re ... | "updateMorphTargets">': onPointerMissed, material, quaternion
, attach, and 92 more.  TS2740

     7 |     <>
     8 |       <Canvas>
  >  9 |         <Box>
       |          ^
    10 |           <meshStandardMaterial attach="material" />
    11 |         </Box>
    12 |       </Canvas>

Suggested solution:

Don't know, I really just started with a tutorial, this is my first time playing around with Three.js and React.

[joshuaellis]

Please provide a repro of the issue so we can look at it, a sandbox will be suffice.

[strblr]

Please provide a repro of the issue so we can look at it, a sandbox will be suffice.

https://codesandbox.io/s/nervous-lovelace-xte95?file=/src/App.tsx

[joshuaellis]

Thanks for the report, there's a patch being released now.

[github-actions]

🎉 This issue has been resolved in version 5.1.7 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀

[Flo2410]

I feel bad commenting on an already closed issue, but I got the same problem using next.js.
Is there any difference between react and next regarding the typescript definitions?

While creating the following sandbox: https://codesandbox.io/s/nostalgic-mclean-e02lt?file=/pages/index.tsx
I run into the issue only on the tab I created the sandbox, I could not reproduce it in an Inkognito tab.

Here are the versions I use:
three version: 0.128.0
@react-three/fiber version: 6.2.0
@react-three/drei version: 5.1.7
node version: v16.1.0
npm version: 7.11.2

[joshuaellis]

Looking at the link you've provided @Flo2410, I can't see an issue.

[Flo2410]

As I mentioned that could be a problem with codesanbox.io. I get a type error in vs-code and on codesandbox, but only if I am logged in.
I attach two screenshots below:

1. fullscreen while being logged in
2. split-screen, on the left side logged in and on the right in Inkognito mode.

[iam-yan]

Hi @Flo2410 I am having the same issues... Have you fixed it? How?

[iam-yan]

hey @Flo2410 ...I have fixed it. Just install @types/three

[Flo2410]

Hi @juuyan OMG, Thanks. How did I not come up with this solution?!
You're the best!

[flyon]

Had the same problem. Saw the drei library came with types, so figured it should work out of the box. But only after installing @types/three did it start working for me in typescript. Would be nice if that could be included in the libraries themselves though so users don't have to manually figure out which type package they need to install