[v6] Custom React hook compilation error

[enzoferey]

Describe the bug

When a component imports a certain piece of code I get cryptic error message.

To Reproduce
Steps to reproduce the behavior:

1. Create a component story that imports the React hook detailed above.
2. See error in the screenshot below.

Expected behavior
I would not expect an error to happen just because I'm importing this piece of code.

Screenshots

Code snippets

// The purpose of this hook is to abstract `null` away, so we can disable linting about it
/* eslint-disable @typescript-eslint/ban-types */
import React from 'react';

export function useDOMRef<T>(): [
  { current: T | undefined },
  (node: T | null) => void
] {
  const [ref, setRef] = React.useState<T | undefined>(undefined);

  // We proxy the `null` to `undefined` value
  const onRefChange = React.useCallback<(node: T | null) => void>((node) => {
    const ref = node === null ? undefined : node;
    setRef(ref);
  }, []);

  // Memoize the object to it doesn't cause more rerenders
  const fakeRef = React.useMemo(() => {
    return {
      current: ref,
    };
  }, [ref]);

  return [fakeRef, onRefChange];
}

System:

Environment Info:

  System:
    OS: macOS 10.15.6
    CPU: (4) x64 Intel(R) Core(TM) i5-7360U CPU @ 2.30GHz
  Binaries:
    Node: 12.14.1 - /usr/local/bin/node
    Yarn: 1.22.4 - ~/.yarn/bin/yarn
    npm: 6.13.4 - /usr/local/bin/npm
  Browsers:
    Chrome: 84.0.4147.135
    Firefox: 79.0
    Safari: 13.1.2

Additional context

    "react-scripts": "3.4.3",
    "typescript": "^4.0.2",
    "@storybook/addon-actions": "^6.0.18",
    "@storybook/addon-essentials": "^6.0.18",
    "@storybook/addon-knobs": "^6.0.18",
    "@storybook/addon-links": "^6.0.18",
    "@storybook/node-logger": "^6.0.18",
    "@storybook/preset-create-react-app": "^3.1.4",
    "@storybook/react": "^6.0.18",
    "@storybook/theming": "^6.0.18",

I can provide more code if you like, but while debugging it doesn't seem context dependant, just a compilation issue with the code snippet I provided above.

[enzoferey]

Update: as visible on the screenshot, it looks like it's actually a miss match of eslint and typescript versions. I discovered the same error while linting some files non related to Storybook.

Update 2: I'm starting to think this is due to different webpack versions overlapping (react-scripts and storybook both require a different version) because my application is on a monorepo. I'm trying hoisting at the moment.

[enzoferey]

It was due to typescript upgrade from 3.9.7 to 4.0.2, spotted thanks to aerogear/graphback#1917 that was mentioned at typescript-eslint/typescript-eslint#1436. Sorry for the inconvenience. Closing.