react-spring
react-spring copied to clipboard
[bug]: Element type is invalid: expected a string when using GlitchPass Effect from react fiber
Which react-spring target are you using?
- [ ]
@react-spring/web
- [X]
@react-spring/three
- [ ]
@react-spring/native
- [ ]
@react-spring/konva
- [ ]
@react-spring/zdog
What version of react-spring are you using?
9.4.5
What's Wrong?
When trying to use animated.glitchPass
to animate the glitchPass effect, when scrolling to fade out the error
Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.
appears.
To Reproduce
In this codesandbox is a reproducible example: https://codesandbox.io/s/twilight-forest-dcvqi3?file=/src/App.tsx
In line 73 is the code which is causing the issue
<animated.glitchPass></animated.glitchPass>
Expected Behaviour
No error to be thrown and the animation to be working
Link to repo
https://codesandbox.io/s/twilight-forest-dcvqi3?file=/src/App.tsx
The error is because we're currently not looking at the custom catalogue that react-three-fiber
has. I'm not sure if it's currently exported so i'd have to take a look at that first...
The TS error you'd probably have to solve in your own codebase assuming we were able to expose the right kind of interface to extend...
Thanks for the report!