Auto complete and auto import not work (ReactJS, ChakraUI)

[TonyStark]

Problem: I am developing react JS project with Chakra UI. When i try to type Box, Grid, GridItem or any other component of chakra ui, vs code cant auto complete or auto import those component from chakra ui module.

Screen Shot:

Does this issue occur when all extensions are disabled?: Yes

• Even occur when all extensions are enabled

VS Code Information:

Version: 1.91.1
Commit: f1e16e1e6214d7c44d078b1f0607b2388f29d729
Date: 2024-07-09T22:08:12.169Z
Electron: 29.4.0
ElectronBuildId: 9728852
Chromium: 122.0.6261.156
Node.js: 20.9.0
V8: 12.2.281.27-electron.0
OS: Linux x64 6.5.6-76060506-generic

Installed Extension:

ES7+ React/Redux/React-Native snippets
npm Intellisense
Prettier - Code formatter

TypeScript Version: 5.5.2

Steps to Reproduce:

1. Installed VS Code. Installed reactJS, ChakraUI. Open Layout.jsx.
2. I type "Gri" to check if it auto import/complete Grid component from ChakraUI

[RyanCavanaugh]

We need a project that reproduces the issue; this behavior may or may not be correct based on your configuration

[TonyStark]

@RyanCavanaugh Here you can clone repo >> https://github.com/TonyStark/vite-start-d15-CRUD-with-router

[TonyStark]

For fresh start i have created vite-project by using pnpm create vite > React > Javascript Later cd vite-project and installed chakra ui pnpm add @chakra-ui/react @emotion/react @emotion/styled framer-motion

[RyanCavanaugh]

TS Server log says

Info 1142 [15:22:35.143] AutoImportProviderProject: attempted to add more than 10 dependencies. Aborting.

You likely need to change this setting from "auto" to "on" and verify you don't have any exclusion patterns that would exclude the target files

With proper configuration

[TonyStark]

@RyanCavanaugh Hello, I set JSON Auto import as on and then restart vscode. but still not getting auto suggestion. i also scrolled through end, but no Grid components suggested in that

[TonyStark]

I think it happened in linux version only

[RyanCavanaugh]

We've never really had a Linux-specific auto-import bug. Did you also modify the path exclusion list?

[TonyStark]

this is my current settings, rest are as default

{
  "javascript.updateImportsOnFileMove.enabled": "always",
  "[javascriptreact]": {},
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnSave": true,
  "prettier.printWidth": 8000,
  "editor.minimap.enabled": false,
  "tabnine.experimentalAutoImports": true,
  "explorer.confirmDelete": false,
  "editor.multiCursorModifier": "ctrlCmd",
  "typescript.preferences.includePackageJsonAutoImports": "on"
}

[typescript-bot]

This issue has been marked as "Question" and has seen no recent activity. It has been automatically closed for house-keeping purposes.