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

2. 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>
  }
}

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

4. 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?