react-spring icon indicating copy to clipboard operation
react-spring copied to clipboard

[bug]: Element type is invalid: expected a string when using GlitchPass Effect from react fiber

Open erdzan12 opened this issue 2 years ago • 1 comments

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

erdzan12 avatar Jun 11 '22 13:06 erdzan12

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!

joshuaellis avatar Jun 14 '22 07:06 joshuaellis