try-triplex / triplex

The React Three Fiber visual IDE.
https://triplex.dev
GNU General Public License v3.0
775 stars 23 forks source link

When userland tsconfig is missing r3f types it can cause unexpected errors #105

Open verekia opened 1 year ago

verekia commented 1 year ago

The following component:

const Crystal = ({ x, y }) => (
  <group position={[x, y, 1.5]} scale={4}>
    <mesh>
      <boxGeometry />
      <meshStandardMaterial />
    </mesh>
  </group>
)

export default Crystal

causes the error Error reading "[...]src/components/models/Crystal.tsx/object/3/5/types" - [Error: Could not find the node's symbol.

Triplex 0.54.1

itsdouges commented 1 year ago

So box geometry can't be found? Is this when clicking it in the editor or when adding an element?

itsdouges commented 11 months ago

Heya I'm able to open this with no error. Can you confirm on the latest Triplex version @verekia?

image
verekia commented 11 months ago

It's still happening for me.

Screenshot 2023-08-25 at 14 39 42

I clicked on the component in the left panel, and nothing showed up. Then, the error shows if I click group on the left.

"@triplex/run": "0.55.3",
"@react-three/drei": "9.74.15",
"@react-three/fiber": "8.13.3",
"react": "18.2.0",
"react-dom": "18.2.0",
"three": "0.153.0",

app/.triplex/config.json:

{
  "components": ["../src/components/**/*.tsx"],
  "files": ["../src/**/*.tsx"]
}

Component is located at app/src/components/Crystal.tsx.

Edit: the same error still happens with updated dependencies:

"@triplex/run": "0.55.3",
"@react-three/drei": "9.80.6",
"@react-three/fiber": "8.13.7",
"react": "18.2.0",
"react-dom": "18.2.0",
"three": "0.155.0",
itsdouges commented 11 months ago

Can you add a short video?

itsdouges commented 10 months ago

Okay so:

  1. The mesh doesn't show up because position is being set to [undefined, undefined, 1.5] which is an invalid position. If you set x and y to default to 0 it starts working
  2. As for the error, I can't replicate it. I think it might be fixed in the latest version. Can you check please?
itsdouges commented 10 months ago

Add this to your tsconfig:

"compilerOptions": {
  "types": ["@react-three/fiber"]
}
verekia commented 10 months ago

That did the trick! It doesn't even throw any more on undefined values.