type checking and auto completion stops working when importing from @react-three/fiber

[Sanderand]

Steps to reproduce

Link to live example: (required)
https://stackblitz.com/edit/vitejs-vite-n9k61v?file=src%2Fmain.tsx,src%2FApp.tsx&terminal=dev

Steps:

1. See line 16: type issue is not recognized on MUI Button component
2. See line 19: other type issues are recognized
3. Comment line 2 (import { Canvas } from '@react-three/fiber';) and see that type issue on MUI Button component is not detected

Current behavior

Type checks on MUI components stop working when having imports from @react-three/fiber

Expected behavior

Type checks on MUI components should continue to work when having imports from @react-three/fiber

Context

No response

Your environment

npx @mui/envinfo

  Don't forget to mention which browser you used.
[Version 1.68.137 Chromium: 127.0.6533.100 (Official Build) (64-bit)](https://brave.com/latest/)

  Output from `npx @mui/envinfo` goes here.
❯ npx @mui/envinfo
Need to install the following packages:
@mui/envinfo@2.0.19
Ok to proceed? (y) y

  System:
    OS: Linux 5.0 undefined
  Binaries:
    Node: 18.20.3 - /usr/local/bin/node
    npm: 10.2.3 - /usr/local/bin/npm
    pnpm: 8.15.6 - /usr/local/bin/pnpm
  Browsers:
    Chrome: Not Found
  npmPackages:
    @emotion/react: ^11.13.0 => 11.13.0 
    @emotion/styled: ^11.13.0 => 11.13.0 
    @mui/core-downloads-tracker:  5.16.7 
    @mui/material: ^5.16.7 => 5.16.7 
    @mui/private-theming:  5.16.6 
    @mui/styled-engine:  5.16.6 
    @mui/system:  5.16.7 
    @mui/types:  7.2.15 
    @mui/utils:  5.16.6 
    @types/react: ^18.3.3 => 18.3.3 
    react: ^18.3.1 => 18.3.1 
    react-dom: ^18.3.1 => 18.3.1 
    typescript: ^5.5.3 => 5.5.4 

Search keywords: type, three, fiber

[aarongarciah]

The issue is unrelated to Material UI. Per my testing, TS is working correctly. It rightfully complains about the required bar prop not being present in <Foo />.

I suggest you to download the sandbox and run it locally. Sometimes online sandboxes misbehave and are quite slow at type checking, so always good to double-check locally e.g. type-checking in the Stackblitz sandbox you shared looks like this for a few seconds until all things load:

[Sanderand]

I can reproduce this locally and provided the Stackblitz as a minimal reproduction example. You are right mentioning that it initially takes some seconds to get the typechecking running. Nevertheless - once it runs - it produces the problems I've mentioned above.

After some more research it seems that this is a known issues that originates from @react-three/fiber, not @mui/material.
#34068 (comment)
#34068 (comment)

So, I guess I just duplicated an existing Github issue. Closing this one. Thanks anyway!