pmndrs / pmndrs/react-spring

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

Open
#1,914 1 comment 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

area: three kind: bug
Dominant language
TypeScript
Stars
29.1k
Forks
1.2k
PR merge metrics
No merged PRs in 30d

Description

Which react-spring target are you using?
  • @react-spring/web
  • @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

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start with src/App.tsx in the linked CodeSandbox and run the reproduction, focusing on line 73 where animated.glitchPass is used. Compare the @react-spring/three usage with the GlitchPass effect, and consider the issue done when the example renders without the invalid-element error and the animation works while scrolling.

Written by the indexing model from the issue text.

Assessment

Tech stack
react, three.js, typescript
Domain
computer-graphics, frontend
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.