VS Code React Typescript component auto-import and autocomplete not working.

[filiptrplan]

Bug Report

🔎 Search Terms

vscode tsx autocomplete, vscode tsx auto import, vscode typescript react autocomplete

🕗 Version & Regression Information

I'm on Typescript version 4.3.5 and I have tried the nightly build too.
I'm on the latest VS Code version 1.58.0. It is a new install with all extensions disabled.
Doesn't work on either 1.56 or 1.57 too.

This seems to be a duplicate of #44657 but that issue is marked as closed even if it still persists.

💻 Code

Analytics.tsx

import React from 'react'

interface AnalyticsProps {

}

export const Analytics: React.FC<AnalyticsProps> = ({}) => {
    return (
        <div>
            
        </div>
    );
}

Sidebar.tsx

import React from 'react'
import './Sidebar.scss';

interface SidebarProps {

}

export const Sidebar: React.FC<SidebarProps> = ({ children }) => {
        return (
            <div className="Sidebar">
                {children}
            </div>
        );
}

Folder structure:

package.json

{
  "name": "analytics-react",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.11.4",
    "@testing-library/react": "^11.1.0",
    "@testing-library/user-event": "^12.1.10",
    "@types/jest": "^26.0.15",
    "@types/node": "^12.0.0",
    "@types/react": "^17.0.0",
    "@types/react-dom": "^17.0.0",
    "chart.js": "^3.4.1",
    "primeflex": "^2.0.0",
    "primeicons": "^4.1.0",
    "primereact": "^6.5.0-rc.2",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-router-dom": "^5.2.0",
    "react-scripts": "4.0.3",
    "react-transition-group": "^4.4.2",
    "typescript": "^4.1.2",
    "web-vitals": "^1.0.1"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "@types/react-router-dom": "^5.1.8",
    "node-sass": "5.0.0"
  }
}

tsconfig.json

{
  "compilerOptions": {
    "target": "es5", 
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ], 
    "allowJs": true, 
    "skipLibCheck": true, 
    "esModuleInterop": true, 
    "allowSyntheticDefaultImports": true, 
    "strict": true, 
    "forceConsistentCasingInFileNames": true, 
    "module": "esnext", 
    "moduleResolution": "node", 
    "isolatedModules": true, 
    "resolveJsonModule": true, 
    "noEmit": true, 
    "jsx": "react", 
    "sourceMap": true, 
    "declaration": true, 
    "noUnusedLocals": true, 
    "noUnusedParameters": true, 
    "incremental": true, 
    "noFallthroughCasesInSwitch": true 
  },
  "include": [
    "src/**/*",
    "src/**/*.d.tsx",
    "src/**/*.tsx" 
  ],
  "exclude": [
    "node_modules",
    "build"
  ] 
}

🙁 Actual behavior

I try to start typing the "Sidebar" component and the autocomplete doesn't suggest it anywhere. When I finish typing the component, the autoimport function shows up in the quick fix category.

🙂 Expected behavior

It should have suggested the "Sidebar" component and upon clicking enter, it should have imported it automatically.

[andrewbranch]

When you’re inside the <div></div>, you’re typing plain old JSX text. We don’t offer any kind of completions or auto imports there because it’s basically the same thing as writing inside a string literal. Think about how annoying it would be if you were actually just trying to type the word “Sidebar” as part of some paragraph text and you kept auto-importing things as you typed. You have to type a < if you want completions for tag/component names.

Kapture.2021-07-13.at.11.19.12.mp4

[filiptrplan]

Thank you for the explanation.

…

On Tue, Jul 13, 2021, 20:21 Andrew Branch ***@***.***> wrote: When you’re inside the <div></div>, you’re typing plain old JSX text. We don’t offer any kind of completions or auto imports there because it’s basically the same thing as writing inside a string literal. Think about how annoying it would be if you were *actually* just trying to type the word “Sidebar” as part of some paragraph text and you kept auto-importing things as you typed. You have to type a < if you want completions for tag/component names. https://user-images.githubusercontent.com/3277153/125504694-efd98ca3-4e59-4e38-ba57-e7d40bcbee6e.mp4 — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub <#45004 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ACB6HALKKZ57QG4OOUKXRTLTXR7ZPANCNFSM5AIRQJUA> .

[filiptrplan]

You have to type a < if you want completions for tag/component names.

Maybe this is also working as intended, but I'll ask anyway. The method where you type < and then the name of the component only works for modules in my src folder. If I include my node_modules folder, the TS language features say that the folder is too big.

Is the only option to get autocomplete from npm modules to include each folder separately, like so?:

  "include": [
    "src/**/*",
    "src/**/*.d.tsx",
    "src/**/*.tsx",
    "node_modules/primereact/*"
  ]

[andrewbranch]

You shouldn’t have to do anything special to get auto imports from node_modules, but some libraries unknowingly use patterns that make it impossible for auto-imports to discover what’s available. Can you tell me what component you’re trying to import from what library?

[filiptrplan]

All components from primereact exhibit this behaviour.

…

On Wed, Jul 14, 2021, 19:14 Andrew Branch ***@***.***> wrote: You shouldn’t have to do anything special to get auto imports from node_modules, but some libraries unknowingly use patterns that make it impossible for auto-imports to discover what’s available. Can you tell me what component you’re trying to import from what library? — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub <#45004 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ACB6HAPU6GJRBEB7DQRIWNDTXXAW5ANCNFSM5AIRQJUA> .

[andrewbranch]

primereact does not have a main or types field in its package.json, so there’s no entrypoint where we can explore the package. The author should minimally add an index.d.ts file that imports or triple-slash references each component so that auto imports can find them from the package root.