Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

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

See original GitHub issue

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

Issue Analytics

State:
Created 3 years ago
Reactions:1
Comments:7 (3 by maintainers)

Top GitHub Comments

2reactions

piehcommented, Apr 2, 2020

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

2reactions

alessbellcommented, Apr 2, 2020

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

Top Results From Across the Web

Wrapping Gatsby's <Link> with TypeScript - Nicolas Charpentier

This component is a wrapper around @reach/router's Link component that adds useful enhancements specific to Gatsby.

Using Gatsby Link with TypeScript - Stack Overflow

Show activity on this post. I'm using Gatsby Link with TypeScript and I want to pass parameters to linked component from source component....

TypeScript and Gatsby

TypeScript is a JavaScript superset which extends the language to include type definitions allowing codebases to be statically checked for soundness. Gatsby ......

Dependencies | docz | npm - Open Source Insights

arrow_right @emotion/core. 10.3.1 Notes Relation Licenses De... Version 10.3.1 Published December 8, 2021 Description arrow_right @mdx‑js/react. 1.6.22 Notes Relation Licenses De... Version 1.6.22 Published December 1,...

Creating New Gatsby Theme with Typescript, MDX, and ...

type -check it should run the typescript compiler. 4. Add an example Typescript page in demo/src/pages/example.tsx. import React from "react" ...