Error: The arity of each "output" value must be equal

[einaralex]

🐛 Bug Report

I got this error and was having a difficult time finding what was causing it, I found out why.
Leaving this here if someone else stumbles upon this.

My mistake was having the timing without a 0 in front : transition: all .20s linear
Changing it to transition: all 0.20s linear got rid of the error.

Example:

        <Transition
           items={stuffs}
           keys={stuffs.map((_item, i) => i)}
           from={{ opacity: 0, transform: 'scaleY(1)', height: 'auto', transition: 'all 0.09s linear' }} 
           enter={{ opacity: 1, transform: 'scaleY(1)', height: 'auto', transition: 'all 0.13s ease' }}
           leave={{ opacity: 0, transform: 'scaleY(0)', height: 0, transition: 'all 0.13s ease' }}
         >
           {(styles, stuff, attr) => {
             return (
               stuff && (
                 <animated.div key={attr.key} style={styles}>
                  ...
                 </animated.div>
               )
             );
           }}
         </Transition>

Environment

• react-spring v9.3.0
• react v17.0.2

[joshuaellis]

I'm confused, so this isn't a bug? Also why wouldn't you use the config prop instead of setting up css transitions that you're changing per phrase?