Clean TS install, `View` type errors.

[PButcher]

After a clean install using yarn create r3f-app next app -ts, the View components in both app/page.tsx and app/blob/page.tsx show the following errors:

Type '{ children: Element; className: string; }' is not assignable to type 'IntrinsicAttributes & RefAttributes<unknown>'.
Property 'children' does not exist on type 'IntrinsicAttributes & RefAttributes<unknown>'.

Inside src/components/canvas/View.tsx the type errors above are present on the ForwardRef, as well as a type error on PerspectiveCamera.

The app still runs and does not output any errors to the terminal or browser console.

Node v16.14.2, MacOS v12.5.1

[vegancat]

Same Error with me, it's a eslint error. bumping next and next-eslint-config both to 13.4.0 solves some of problems but linting ones remain the same

[tunztunztunz]

I did what @vegancat suggested and it seemed to fix most of the errors with the View component except for the error @PButcher was saying they had. I was able to fix the errors with the View component by typing it like this:

interface ViewProps {
  children: ReactNode
  orbit?: boolean
  className?: string
}

I'm not sure if that's the best approach, but it seems to get rid of the ts error, at least.

[mystist]

Same issue and even worse. This is supper horrible

[onion2k]

@tunztunztunz's suggestion resolved the View component problems for me.

Installing @types/three resolved all the type issues on the Three components.

I also needed to add a color prop to the first Common component.

[dsimonow]

usePostprocess.tsx is also full of errors. even after updating next and next eslint.

[xih]

Running into a bunch of type errors as well with a fresh typescript install. installing @types/three didn't solve it for me.

any solutions?

[filahf]

Running into a bunch of type errors as well with a fresh typescript install. installing @types/three didn't solve it for me.

any solutions?

The Common component should be typed like this:

type CommonProps = { color?: THREE.ColorRepresentation }

export const Common = ({ color }: CommonProps) => (...)

and the View component should be typed like this:

type ViewProps = HTMLAttributes<HTMLDivElement> & {
  orbit?: boolean
}

const View = forwardRef<HTMLElement, ViewProps>(({ children, orbit, ...props }, ref) => {..}

I would make a PR, but it seems like the ts flavored template is hidden.

[benschac]

From 4680864d804943e2d156735d722b306983fcfe3c Mon Sep 17 00:00:00 2001
From: benjamin <benschac@gmail.com>
Date: Wed, 24 Apr 2024 11:31:46 -0400
Subject: [PATCH] fix types in pagetsx

---
 src/components/canvas/View.tsx | 45 +++++++++++++++++++++-------------
 1 file changed, 28 insertions(+), 17 deletions(-)

diff --git a/src/components/canvas/View.tsx b/src/components/canvas/View.tsx
index ad5cd94..d0cb461 100644
--- a/src/components/canvas/View.tsx
+++ b/src/components/canvas/View.tsx
@@ -1,10 +1,10 @@
 'use client'

 import { forwardRef, Suspense, useImperativeHandle, useRef } from 'react'
-import { OrbitControls, PerspectiveCamera, View as ViewImpl } from '@react-three/drei'
+import { OrbitControls, PerspectiveCamera, View as ViewImpl, ViewProps } from '@react-three/drei'
 import { Three } from '@/helpers/components/Three'

-export const Common = ({ color }) => (
+export const Common = ({ color }: { color?: string }) => (
   <Suspense fallback={null}>
     {color && <color attach='background' args={[color]} />}
     <ambientLight />
@@ -14,22 +14,33 @@ export const Common = ({ color }) => (
   </Suspense>
 )

-const View = forwardRef(({ children, orbit, ...props }, ref) => {
-  const localRef = useRef(null)
-  useImperativeHandle(ref, () => localRef.current)
+const View = forwardRef(
+  (
+    {
+      children,
+      orbit,
+      ...props
+    }: ViewProps & {
+      orbit?: boolean
+    },
+    ref,
+  ) => {
+    const localRef = useRef(null)
+    useImperativeHandle(ref, () => localRef.current)

-  return (
-    <>
-      <div ref={localRef} {...props} />
-      <Three>
-        <ViewImpl track={localRef}>
-          {children}
-          {orbit && <OrbitControls />}
-        </ViewImpl>
-      </Three>
-    </>
-  )
-})
+    return (
+      <>
+        <div ref={localRef} {...props} />
+        <Three>
+          <ViewImpl track={localRef}>
+            {children}
+            {orbit && <OrbitControls />}
+          </ViewImpl>
+        </Three>
+      </>
+    )
+  },
+)
 View.displayName = 'View'

 export { View }
-- 
2.39.3 (Apple Git-145)

patch if it's helpful