Gatsby: [gatsby-link] typescript types collide with @types/react

[JustFly1984]

Got this error in attempt to update

node_modules/gatsby-link/index.d.ts:4:18 - error TS2430: Interface 'GatsbyLinkProps<TState>' incorrectly extends interface 'LinkProps<TState>'.
  Types of property 'innerRef' are incompatible.
    Type 'Function | undefined' is not assignable to type '((instance: HTMLAnchorElement | null) => void) | RefObject<HTMLAnchorElement> | null | undefined'.
      Type 'Function' is not assignable to type '((instance: HTMLAnchorElement | null) => void) | RefObject<HTMLAnchorElement> | null | undefined'.
        Property 'current' is missing in type 'Function' but required in type 'RefObject<HTMLAnchorElement>'.

4 export interface GatsbyLinkProps<TState> extends LinkProps<TState> {
                   ~~~~~~~~~~~~~~~

  node_modules/@types/react/index.d.ts:88:18
    88         readonly current: T | null;
                        ~~~~~~~
    'current' is declared here.

gatsby info:

  System:
    OS: macOS 10.15.4
    CPU: (16) x64 Intel(R) Core(TM) i9-9980HK CPU @ 2.40GHz
    Shell: 5.7.1 - /bin/zsh
  Binaries:
    Node: 13.12.0 - ~/.nvm/versions/node/v13.12.0/bin/node
    Yarn: 1.22.4 - /usr/local/bin/yarn
    npm: 6.14.4 - ~/.nvm/versions/node/v13.12.0/bin/npm
  Languages:
    Python: 2.7.16 - /usr/bin/python
  Browsers:
    Chrome: 80.0.3987.149
    Firefox: 74.0
    Safari: 13.1
  npmPackages:
    gatsby: 2.20.10 => 2.20.10
    gatsby-plugin-manifest: 2.3.3 => 2.3.3
    gatsby-plugin-no-sourcemaps: 2.2.0 => 2.2.0
    gatsby-plugin-offline: 3.1.2 => 3.1.2
    gatsby-plugin-purgecss: 5.0.0 => 5.0.0
    gatsby-plugin-react-helmet: 3.2.1 => 3.2.1
    gatsby-plugin-robots-txt: 1.5.0 => 1.5.0
    gatsby-plugin-root-import: 2.0.5 => 2.0.5
    gatsby-plugin-sitemap: 2.3.1 => 2.3.1
    gatsby-plugin-typescript: 2.3.1 => 2.3.1
    gatsby-plugin-webpack-bundle-analyzer: 1.0.5 => 1.0.5
  npmGlobalPackages:
    gatsby: 2.20.10

typescript 3.8.3

[JustFly1984]

attaching the list of all currently existing typescript errors https://github.com/gatsbyjs/gatsby/issues/22070

[JustFly1984]

doesnt work actyually!!!
found a temporary fix:

adding in package.json next lines

"resolutions": {
    "@types/reach__router": "1.2.6"
}

As I see types was updated in [email protected], but current version of @types/reach__router is 1.3.3, which also gives a conflict with @types/react

[JustFly1984]

sorry, last fix does not work anymore, cos { useLocation } does not exist on @types/[email protected], so I'm kind of stuck, can't run clean yarn.lock anymore, cos build fails.

[pieh]

Are you able to share your project or at least tsconfig? I tried to reproduce this and other TS problems ( https://github.com/gatsbyjs/gatsby/issues/22706 ), but I just couldn't

[alessbell]

I just started seeing the exact same error as reported in this issue, repo is here.

[pieh]

Thanks @alessbell! I was able to reproduce and seems like my proposed fix in https://github.com/gatsbyjs/gatsby/issues/22706#issuecomment-607832262 will do the trick

[pieh]

This should be fixed in [email protected] / [email protected]