React Native <Text> component quick fix weird import suggestion

[svipas]

*Templated added by Matt Bierner (@mjbvz)

TypeScript Version: 3.7.0-dev.20190919

Search terms

• React
• quick fix
• add missing import

original issue below

---

• VSCode Version: 1.38.1 and 1.39.0
• OS Version: macOS

Very weird issue... In React Native if you write <Text></Text> and you use Quick Fix... on the first <Text> you will get Import default 'React' from "react", but if you use Quick Fix... on the second </Text> (closing) you will get Import 'Text' from module "react-native" (which is correct).

It's hard to describe the issue so these screenshots will explain everything.

I expect to get the same behavior like with </Text> (closing) if I use Quick Fix on the <Text> (opening).

Steps to Reproduce:

1. yarn add react react-native @types/react @types/react-native
2. Create tsconfig.json with the content below.
3. Create new file App.tsx with the content below.
4. Move cursor to the first <Text> and press CMD+. or use Quick Fix... from Command Palette.

tsconfig.json

{
  "compilerOptions": {
    "jsx": "react-native",
    "lib": ["es6"],
    "esModuleInterop": true,
    "moduleResolution": "node"
  }
}

package.json

{
  "dependencies": {
    "@types/react": "^16.9.2",
    "@types/react-native": "^0.60.15",
    "react": "^16.9.0",
    "react-native": "^0.60.5"
  }
}

App.tsx

import React from 'react';

function App() {
  return <Text>Hello, World!</Text>;
}

[maximusnikulin]

I have this bug too!

[svipas]

This bug still exists and it’s kinda weird. Maybe somehow we can help to fix it?

[svipas]

Oleksandr Tarasiuk (@a-tarasyuk) Nathan Shively-Sanders (@sandersn) TS: 5.6.3 problem still exists unfortunately :(

As you can see if I use Quick Fix it doesn't have Text as an import and it should suggest me it from react-native. I do think it overlaps with Text from lib/lib.dom.d.ts, because if I Go To Definition it opens it.

How I can avoid this, because it is really frustrating since in React Native this is most used component.

[sandersn]

I can't remember--does react-native require your tsconfig's "lib" to include "dom"? If not, you could try getting rid of it from your tsconfig.
(A quick look at, say, @types/react-native-md5 on Definitely Typed just has "lib": ["es6"], which suggests that you don't need it either.)

[svipas]

Nathan Shively-Sanders (@sandersn) Even if I use "lib": ["es6"] it still does that, tried restarting VS Code, same. I do see expo ("extends": "expo/tsconfig.base") contains "lib": ["DOM", "ESNext"], but even if I remove that extends and add "lib": ["ESNext"] issue is still the same Text from lib/lib.dom.d.ts appears as first and using quick fix it doesn't suggest to add Text import from react-native.

[svipas]

Oleksandr Tarasiuk (@a-tarasyuk) Nathan Shively-Sanders (@sandersn) You were right, that the problem was with tsconfig...

Seems like problem was not only with lib containing dom since expo decided to include it, but also missing this part: "types": ["react-native"] which solved an issue for me, also this now removes dom suggestions like Text from imports, finally!

Sorry for the chaos 😄