Typescript: VSCode thinks there are 2 definitions of a React Component

[mjbvz]

_From @mdo5004 on June 8, 2018 14:47_

VSCode thinks there are 2 definitions of a React Component

This issue was brought up recently but without sufficient info. Here is a minimal reproduction example:

• VSCode Version: 1.24.0
• OS Version: MacOS High Sierra 10.13.4 (17E202)

Steps to Reproduce:

1. Create a React app

$ create-react-app my-bug-example
$ code my-bug-example

1. Change src/App.js to

import React, { Component } from 'react';

class App extends Component {
  render() {
    return (
      <div className="App">
      <MyComponent />
      </div>
    );
  }
}

export default App;

class MyComponent extends Component {
  render(){
    return <MySingleComponent text="Instance 1" />
  }
}

class MySingleComponent extends Component {
  render(){
    return <p>{text}</p>
  }
}

1. CMD + hover on <MySingleComponent text="Instance 1" />

1. CMD + click on <MySingleComponent text="Instance 1" />

Does this issue occur when all extensions are disabled?: Yes

_Copied from original issue: Microsoft/vscode#51459_

[mjbvz]

Tested on 3.0 20180608

The incorrect definition is coming from our automatically acquired types for react:

I believe this is happening because the jsx tag here is both a class and a constructor. Adding a ctor to MySingleComponent fixes the problem. Not sure which the expected behavior would be in general but showing the Component ctor is not expected

[slsriehl]

I'm getting something similar working on Nodejs, and it appears to affect all anonymous functions in JavaScript, ES5 or arrow, whether imported or not.

VSCode: 1.24.0

OS: MacOS High Sierra 10.13.5

Still broken with all extensions & preferences disabled: yes

Here's the imported object/method:

...cases.js

const objects = {
    reduceVersion: (foo, bar) => {
        return ...
     }
}

module.exports = objects;

Case 1: Require just this method

...one.js

const reduceVersion = require('../../../transforms/models/read/cases').reduceVersion;

const operation = (req, res) => {
    ...
   let version = reduceVersion(...);
}

cmd + hover says "Click to show 2 definitions".

cmd + click on the call "reduceVersion" in function "operation" gives the 2 definitions error on the const assigned to the import & shows the two versions as the import expression & the definition imported:

Case 2: Require the whole method object and call method with dot notation

...one.js

const readCases = require('../../../transforms/models/read/cases');

const operation = (req, res) => {
    ...
   let version = readCases.reduceVersion(...);
}

cmd + hover says "Click to show 2 definitions".

cmd + click on the call "cases.reduceVersion" in function "operation" gives the 2 definitions error at the key holding the definition (no duplicate key exists):

Case 3: Define anonymous function (arrow OR ES5) assigned to a variable without import (with let, const, or var)

const reduceVersion = (foo, bar) => {
    return foo;
}

//OR

var reduceVersion = function (foo, bar) {
   return foo;
}

//...etc

const operation = (req, res) => {
    ...
   let version = reduceVersion(...);
}

cmd + hover says "Click to show 2 definitions".

cmd + click:

Case 4: ES5 named function (WORKS)

function reduceVersion(foo, bar) {
    return foo;
}

const operation = (req, res) => {
    ...
   let version = reduceVersion(...);
}

cmd + hover doesn't say 2 definitions

cmd + click jumps to definition

[mhegazy]

@andy-ms does #24995 address this issue?

[andy-ms]

No, but the fix is related. #25382

[daweilv]

Does it fixed? Which ts version should I download? @andy-ms
I've just try to download npm install -g [email protected],[email protected]
and typescript@next, neither of them work.

[daweilv]

Sorry , It does work! I changed VS Code default ts path with my own. via.
Thank you so much!🎉🎉🎉

[davnicwil]

This appears to still happen, latest TS 3.6.3, latest VSCode 1.38.1

Quick repro, create a new tsx file with this content:

import React from 'react'

const Thing: React.FC<{ text: string }> = (props) => <div>{props.text}</div>

const HelloWorld = () => <Thing text="hello world" />

When I cmd+click on <Thing I expect the cursor to go to the definition const Thing

Instead, this happens:

Basically the definitions seems to want to go to the type def for React.FC from node_modules/@types/react, as well as the actual definition of Thing, just because Thing has that type.

I never, under any circumstance, want this behaviour when cmd clicking the JSX component. I want to go to the definition of that component. If I want to go to the type def, I'll cmd+click on React.FC

Is this behaviour intentional, or is it a bug? Can it be configured? Will it be changed in future so it can be?

Please if you have a minute, just a simple no, no, no answer would be fine. Just want to know as it's a source of frustration for ages using VSCode with react & typescript and if it won't go away, I'd rather just know rather than always googling to see how to fix it :-)

[lilybucher]

Still happening here with TS 3.5.3, using React.FC....

Sample code...

export const Transport: React.FunctionComponent<TransportProps> = ({}) => {
}

In another jsx file:

<Transport />

[rotero]

Also still happening on NodeJS on latest version of VSCode (1.39.2) on Mac (10.14.6). Examples not only as mentioned by slsriehl but also happening using Object.prototype function annotation

[mz8i]

Happening to me too in relation to a component of type React.FunctionComponent - VSCode thinks there are two definitions upon ctrl-clicking <Foo /> and uses Peek Definition instead of Go To File, which is definitely undesirable in this case.
VSCode 1.39.2 on Ubuntu 19.04.

[or2008]

have the same issue with React.FC,
@davnicwil did you manage to fix that? maybe it is a good idea to open a new issue?

[davnicwil]

@or2008 No, still not fixed.

I think this one should just be re-opened to be honest. The thread has context and it seems the problem described originally is still present (or was perhaps re-introduced?) despite it being closed.

[agos]

had the same happen today with 3.7.4. For other people using Visual Studio code and not liking the change, a workaround is to change two settings: Editor › Goto Location: Multiple Definitions (editor.gotoLocation.multipleDefinitions) and Editor › Goto Location: Multiple Type Definitions (editor.gotoLocation.multipleTypeDefinitions), setting both of them to 'goto'

[RyanCavanaugh]

I'm going to leave this closed. Please open a new issue with a concrete way to reproduce the issue and we'll be happy to take a look. Thanks!

[davnicwil]

@RyanCavanaugh amazing, thanks - will this comment suffice if I just copy/paste it to a new issue?

It'd be so great to get this looked at & fixed. It'd be in my opinion a pretty great UX improvement for anyone using React + TS + VSCode, which is probably a lot of users!

[moshfeu]

This issue is still happening in

Version: 1.43.2
Commit: 0ba0ca52957102ca3527cf479571617f0de6ed50
Date: 2020-03-24T07:34:57.037Z
Electron: 7.1.11
Chrome: 78.0.3904.130
Node.js: 12.8.1
V8: 7.8.279.23-electron.0
OS: Darwin x64 19.3.0

[davnicwil]

@RyanCavanaugh ☝️ I've created a new issue for this with a concrete way to reproduce, as requested. Cheers.