React-three-fiber: v4.0.1: TypeScript definitions for Canvas / CanvasContext broken

[arabold]

Seems the latest v4.0.0/v4.0.1 has an issue in the TypeScript definitions. I'm importing Canvas as follows:

import { Canvas, CanvasContext } from "react-three-fiber";

However, since the update this gives me a TS error:

TypeScript error in [...]/node_modules/react-three-fiber"' has no exported member 'Canvas'. TS2305

Importing a specific renderer directly such as "react-three-fiber/svg" or "react-three-fiber/web" gives an error that no declaration files could be found:

Could not find a declaration file for module 'react-three-fiber/web'. '[...]/node_modules/react-three-fiber/web.js' implicitly has an 'any' type.

Otherwise I'm very excited testing the update. Amazing work!

[drcmda]

i hope its fixed now, it was missing the types folder in the distro, looks like a merge conflict, not sure how that could have happened

[arabold]

Yes, importing "react-three-fiber" works as expected now. "react-three-fiber/web" doesn't have any types though. Is this expected?

Another breaking change seems that <Canvas /> now _requires_ a renderer prop which, from quickly glancing at the code, seems also incorrect. Passing a noop function works around this issue temporarily.

Unfortunately I'm traveling in a few hours and won't be able to deep-dive and test much longer. Again, thanks a lot for these exciting updates. I still can barely believe what is possible with React + WebGL.

[drcmda]

/web is basically the default. but how you can get types for the other things, i'm not sure, i guess typescript needs overrides then. i tried to fix the renderer prop thing. but yeah, TS is still new ground for me, happy for all the help i can get :-)

[arabold]

I gave it a quick test and it seems the default WebGL renderer works as expected again. I didn't have to change any code from v3 to v4. It worked out of the box. I think we can close this issue now. Thanks for your super quick follow up!

[arabold]

One more addition: I've tested SVG support and it seems despite PR #270 importing react-three-fiber/svg will not work properly but throws a TypeScript error instead:

import { Canvas } from "react-three-fiber/svg";

Could not find a declaration file for module 'react-three-fiber/svg'. '/Users/rabold_andre/Projects/Private/frontier-web/node_modules/react-three-fiber/svg.js' implicitly has an 'any' type.

[drcmda]

i haven't pushed a patch for @hasparus pr yet, i think he fixed it. will do today :-)

[hasparus]

hey @arabold, in the meantime you can work around it with

declare module "react-three-fiber/svg" {
  export * from 'react-three-fiber/targets/svg';
}

proof by codesandbox 😉
https://codesandbox.io/s/gifted-shadow-pu5rb?fontsize=14&hidenavigation=1&module=%2Fsrc%2Fworkaround.ts&theme=dark

After rollup builds the lib there should be svg.d.ts in the dist with almost the same export * statement.

[drcmda]

have pushed it now, sorry for the delay