Getting Error in function Object.SpringContext [as __c] in @react-spring/core/index.js

[areuin-AH]

Hi, all!
Im getting this error when my component is unmounted...

debug.module.js:1 Uncaught TypeError: Cannot destructure property 'children' of 'undefined' as it is undefined.
    at Object.SpringContext [as __c] (index.js:1349)
    at g (hooks.module.js:1)
    at Array.forEach (<anonymous>)
    at preact__WEBPACK_IMPORTED_MODULE_0__.options.unmount (hooks.module.js:1)
    at Object.preact__WEBPACK_IMPORTED_MODULE_1__.options.unmount (compat.module.js:1)
    at L (preact.module.js:1)
    at L (preact.module.js:1)
    at L (preact.module.js:1)
    at L (preact.module.js:1)
    at L (preact.module.js:1)

Currently i'm using the "useSpring" hook, for a few components being called in some state updates..

mainComponent.jsx

const main = () => {
  .
  ​. some custom logic for my scroll actions.... 
​  .

 ​const shouldMount = scrollIndex === 50 ?  true : false
 ​return ( <> { shouldMount && <ChildComponent />} </>)
}

ChildComponent.jsx

const childComponent = () => {
	const [case, setCase] = React.useState(0);
	
	const [betValues_filled_3, betValues_filled_3_API] =  useSpring(() => ({
		opacity:  0,
		transform:  "scale(1)"
	}));

	switch(case) {
		case 0: {
			betValues_filled_3_API.start({
				opacity: 1,
				transform:  "scale(1.2)",
				delay:  2000
			})
			break
		}
		case 1: {...}
		case 2: {...}
		case 3: {...}
	}
	
	return (
		<>
			<animated.div style={{...someCustomsStyles, ...betValues_filled_3}} >
				.
				. Some custom components.... 
				.
			</animated.div> 
			
		</>
	)
}

any ideas or suggestions would be greatly appreciated, thank you! 😓😓

[joshuaellis]

transform: "scale:(1)" looks a bit odd to me... you can do it like so:

	const [betValues_filled_3, betValues_filled_3_API] =  useSpring(() => ({
		opacity:  0,
		scale: 1
	}));

And when passing it to the animated.div it will be handled correctly. Would you be able to give that a go? Else if that doesn't work, i'd recommend creating a sandbox for me to look at 😄

[areuin-AH]

Thanks for your quick answer!
I was trying to do the code in the sandbox and I just discovered that it does not generate the error there. So i think may be some conflict with my project libs. I'll keep debugging this ...
Regarding the way of writing the object, I like it much more! It's more elegant ... I'll start to implement it that way! 😅 👍

[Inviz]

I have the same issue, though with useTransition. Did you manage to figure it out?

[Inviz]

The issue has been diagnosed, combination of preact/react-spring together: preactjs/preact#3165

[developit]

This will be fixed in the next version of Preact (10.5.14). If you're waiting for that, here's a patch you can drop anywhere into your project that fixes the issue in Preact 10+:

import { options } from 'preact';
let old = options.__h;
options.__h = (c, i, type) => {
  if (type === 9) {
    let hooks = c && (c.__H || (c.__H = { __: [], __h: [] })) && c.__H.__;
    if (!hooks[i]) hooks[i] = Object.defineProperty({}, '__c', DESC);
  }
  if (old) old(c, i, type);
};
const DESC = {
  get() { return this.c },
  set(v) { this.c = typeof v === 'function' ? Object.assign({}, v) : v },
};

[developit]

@joshuaellis if you're curious - the reason this broke is because of the mixin-style context provider that is also a context object react-spring defines here. I know this was done to simplify things, but it's a pattern that is likely to cause headaches in more than just Preact - might be worth reconsidering!

FWIW there are two options you might be interested in:

1: augmented context.Provider:

Instead of providing <SpringContext> to do Provider inheritance, augment SpringContext.Provider to do it and have the API be the same as any other context provider (<SpringContext.Provider>{children}<//>):

export const SpringContext = createContext(init);

const InternalContextProvider = SpringContext.Provider;
SpringContext.Provider = function({ children, ...props }) {
    const inherited = useContext(ctx);
    // <snip>: same as current SpringContext() FC
    const { Provider } = ctx;
    return <InternalContextProvider value={props}>{children}</InternalContextProvider>
};

2: Provider with context as seldom-used property

Keep the simple <SpringContext> provider, but move the actual context object from createContext onto a .ctx property. To simplify usage of that context, export a useSpringContext() wrapper.

export function SpringContext({ children, ...props }) {
    // <snip>: same as current
   return <SpringContext.ctx.Provider value={props}>{children}</SpringContext.ctx.Provider>;
}

SpringContext.ctx = createContext(init);

export function useSpringContext() {
  return useContext(SpringContext.ctx);
}

[heyushuo]

This will be fixed in the next version of Preact (10.5.14). If you're waiting for that, here's a patch you can drop anywhere into your project that fixes the issue in Preact 10+:

import { options } from 'preact';
let old = options.__h;
options.__h = (c, i, type) => {
  if (type === 9) {
    let hooks = c && (c.__H || (c.__H = { __: [], __h: [] })) && c.__H.__;
    if (!hooks[i]) hooks[i] = Object.defineProperty({}, '__c', DESC);
  }
  if (old) old(c, i, type);
};
const DESC = {
  get() { return this.c },
  set(v) { this.c = typeof v === 'function' ? Object.assign({}, v) : v },
};

When will the version be released？