TS2488: Type '{}' must have a '[Symbol.iterator]()' method that returns an iterator

[phoenisx]

Hi, I am getting following TS linting error:

Type '{}' must have a '[Symbol.iterator]()' method that returns an iterator 

For return type from useSpring, code snippet:

const [, setScrollPos, stopScroll] = useSpring(() => { if (isBrowser()) { return { immediate: false, from: { y: window.pageYOffset }, onChange: (y: number) => {}, onRest: () => {}, config: config.slow, }; } else { return { from: { y: 0 }, }; } });

This discussion is on the issue raised here - #822, which has been closed, but I am still getting the error, even after various tries.

Please help me understand if I am doing something wrong.

Technical Details:

• "typescript": "^3.9.7"
• "react-spring": "9.0.0-rc.3"

tsconfig.json

{ "compilerOptions": { "allowJs": true, "baseUrl": ".", "esModuleInterop": true, "forceConsistentCasingInFileNames": true, "isolatedModules": true, "jsx": "preserve", "lib": [ "dom", "dom.iterable", "es6", "esnext" ], "module": "esnext", "moduleResolution": "node", "noEmit": true, "paths": {}, "resolveJsonModule": true, "skipLibCheck": true, "strict": true, "target": "es6", }, "exclude": [ "node_modules" ], "include": [ "next-env.d.ts", "**/*.ts", "**/*.tsx" ], "typeRoots": [ "./node_modules/@types", "./typings" ] }

[aleclarson]

This is a bug. You must be returning invalid props, and the overload order makes TypeScript think you're trying to use the useSpring({ ...props }) overload instead of the useSpring(() => ({ ...props })) overload. The next RC might have this fixed already, but not released yet.

[phoenisx]

Thanks @aleclarson

[phoenisx]

I solved this (temporarily) by forcefully passing deps parameters.

 const [, setScrollPos, stopScroll] = useSpring(() => { if (isBrowser()) { return { immediate: false, from: { y: window.pageYOffset }, onChange: (y: number) => {}, onRest: () => {}, config: config.slow, }; } else { return { from: { y: 0 }, }; } }, []);