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 },
      };
    }
  }, []);