missing import code action tries to import React unnecessarily

[davidhu2000]

In the case below where we are missing import { Image } from 'react-native';

import { render } from '@testing-library/react-native';

describe('test lsp', () => {
  render(<Image />);
});

the available code action from the tsserver are

because we are using react-18, importing react is unnecessary.

After adding

import React from' react';

then the code actions work

the Add import from "react-native" should show up on the first try.

typescript-language-server --version
2.1.0

[rchl]

Are you able to provide a minimal project that reproduces this issue?

[davidhu2000]

@rchl, I created a quick repo to reproduce. https://github.com/davidhu2000/ts-lsp-import-bug

I did someadditional tests, and it appears that the following option works

{
  "compilerOptions": {
    "jsx": "react-jsx",

however, jsx: 'react-native' or jsx: react does not work. does this mean this is a typescript issue?

Possibly related? microsoft/TypeScript#41762

[rchl]

Possibly related? microsoft/TypeScript#41762

I suppose so.
If this also works the same in VSCode then most definitively something that Typescript might need to handle.

[davidhu2000]

Yeah. Also happening in VS Code, l I'll open an issue with typescript