Skip to content

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

Closed
@svipas

Description

@svipas

*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>;
}

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions