Javascript completion for react components does not display certain completion proposals

[yyoncho]

Description

The completion does not work for React component.

Reproduction Steps

Setup:

npm install -g create-react-app
create-react-app react-demo 
cd react-demo 
docker run -it --init -p 3000:3000 -v "$(pwd):/home/project:cached" theiaide/theia:next

Then the completion under React does not work unless you comment the import statement: here it is a gif demonstrating the behaviour.

OS and Theia version: 0.14.0-next (or at least all components in about box are that version).

[akosyakov]

Have you tried with VS Code built-in typescript extensions?

[yyoncho]

It works in vscode. We found the issue in the typescript language server and @danielmartin will provide a PR.

[akosyakov]

@yyoncho You can use VS Code extension for TypeScript with Theia. It gives you a better to support. It's a bit cumbersome to get for now. @marcdumais-work Do you think it is already possible to get proper vsix file from your PR: https://github.com/theia-ide/vscode-builtin-extensions/pull/15

We are going to drop support of Theia TypeScript extension soon.

[marcdumais-work]

I just tried the React scenario above using the built-ins and it's not working well yet. I'll use this as a base to troubleshoot and report-back when I have made progress.

[danielmartin]

We are going to drop support of Theia TypeScript extension soon.

That'd be bad, because I think this is the best LSP extension for TypeScript right now. Not everyone uses VSCode. This extension uses tsserver directly (in contrast to https://github.com/sourcegraph/javascript-typescript-langserver), so its behavior is the most similar to what VSCode offers.

I just tried the React scenario above using the built-ins and it's not working well yet. I'll use this as a base to troubleshoot and report-back when I have made progress.

I've debugged this problem already. What I saw is that the language server is missing a call to compilerOptionsForInferredProjects. This is needed for this kind of "inferred" projects because otherwise the TypeScript compiler doesn't know how to compile the code.

If you place a tsconfig.json file like this one in the root of the React project, compilation will work as expected:

{
  "compilerOptions": {
    "module": "commonjs",
    "target": "es2016",
    "jsx": "preserve",
    "allowJs": true,
    "allowSyntheticDefaultImports": true,
    "allowNonTsExtensions": true
  }
}

Here's the JSON payload, as shown by VSCode when TS logging is enabled and the server is initializing:

    {"seq":1,"type":"request","command":"compilerOptionsForInferredProjects","arguments":{"options":{"module":"commonjs","target":"es2016","jsx":"preserve","allowJs":true,"allowSyntheticDefaultImports":true,"allowNonTsExtensions":true}}}

[akosyakov]

That'd be bad, because I think this is the best LSP extension for TypeScript right now.

It is still out there. We can make you a maintainer for this project or someone can fork it.

I've debugged this problem already.

It is fixable, but someone has to test/review/land it and then upgrade Theia with the same process. You will need to find someone. cc @eclipse-theia/ecd-theia-committers

[marcdumais-work]

@akosyakov

I can now get Typescript to work nicely from the built-ins, but some manual intervention is required. Please see: https://github.com/theia-ide/vscode-builtin-extensions/pull/15#issuecomment-564004792