Skip to content

React Native <Text> component quick fix weird import suggestion #33511

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
svipas opened this issue Sep 18, 2019 · 6 comments · Fixed by #38419
Closed

React Native <Text> component quick fix weird import suggestion #33511

svipas opened this issue Sep 18, 2019 · 6 comments · Fixed by #38419
Labels
Bug A bug in TypeScript Domain: Auto-import
Milestone

Comments

@svipas
Copy link

svipas commented Sep 18, 2019

*Templated added by @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.

Screen Shot 2019-09-18 at 19 33 00

Screen Shot 2019-09-18 at 19 33 04

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>;
}
@mjbvz mjbvz self-assigned this Sep 18, 2019
@mjbvz mjbvz transferred this issue from microsoft/vscode Sep 19, 2019
@mjbvz mjbvz removed their assignment Sep 19, 2019
@RyanCavanaugh RyanCavanaugh added Bug A bug in TypeScript Domain: Auto-import labels Sep 20, 2019
@RyanCavanaugh RyanCavanaugh added this to the Backlog milestone Sep 20, 2019
@maximusnikulin
Copy link

I have this bug too!

@svipas
Copy link
Author

svipas commented Apr 3, 2020

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

@svipas
Copy link
Author

svipas commented Dec 9, 2024

@a-tarasyuk @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
Copy link
Member

sandersn commented Dec 9, 2024

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
Copy link
Author

svipas commented Dec 10, 2024

@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
Copy link
Author

svipas commented Dec 15, 2024

@a-tarasyuk @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 😄

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Bug A bug in TypeScript Domain: Auto-import
Projects
None yet
Development

Successfully merging a pull request may close this issue.

5 participants