There are some issues about Auto Import feature in VSCode builtin expension.

[guohuamin]

Issue Type: Bug

Hi, VSCode Team! I'm a deaf disable chinese. When I try to use the Auto Import feature in VSCode builtin expension(Typescript and Javascript Feature), I found that the suggestion list don't show a lot of variables that can add automationally import statement at the top of the file,but from these dependencies that I need to import auto. I show this sample..

In the sample project structure,
test[project-directory]
--node_module
--src
----lib
------fun.js
----app.js
----jsconfig.json
--package.json

In package.json file,

{
  "name": "test",
  "version": "1.0.0",
  "description": "#",
  "dependencies": {
    "@material-ui/core": "^4.0.2",
    "lodash": "^4.17.11",
    "react": "^16.8.6",
    "react-router": "^5.0.0",
    "react-router-dom": "^5.0.0"
  },
  "devDependencies": {},
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "ghm",
  "license": "ISC"
}

In jsconfig.json file,

{
  "compilerOptions": {
    "checkJs": true,
    "baseUrl": ".",
    "noLib": false
  }
}

In src/lib/fun.js file,

export default function add(a, b) {
  return a + b;
}
export function mul(a, b) {
  return a * b;
}

In src/app.js file:
This file is emtry file, I start to try to type "add" or "mul" , it can show these variables that can import auto. because in src directory has jsconfig.json file, it tell VSCode that this src directory is served as javascript project. I have four deps (react, react-router-dom, lodash, @material-ui/core) that I need to reference variables with auto import feature from. If I want to reference "Component", "useState" or "useEffect" from React library dep, when I try to type "Com.." or "use..", I foud that auto import can work. But, if I want to reference some variable from 'lodash','react-router-dom' and '@material-ui/core', and I try typing some suffix word, I found that the auto import doesnt' work! Atfer I first add "import {} from '@material-ui/core'", I try to type "Button" or "Paper", the result in that auto import feature help me to write "Button, Paper" in the { } curly in "@material-ui/core".In other 'lodash' or 'react-router-dom' deps, I try to type 'range' or 'random', 'Link', "Route", the result in the auto import doesn't work! These four deps have the typing file(.d.ts) from Automatic Type Acquisition. These are trouble! How to solve these problems? Thanks you!

VS Code version: Code - Insiders 1.35.0-insider (0284236851a94b116f468345f6e98688a737015d, 2019-05-31T21:32:42.295Z)
OS version: Windows_NT x64 10.0.18898
Remote OS version: Linux x64 4.4.0-18898-Microsoft

System Info

Item	Value
CPUs	Intel(R) Xeon(R) CPU E3-1230 v3 @ 3.30GHz (8 x 3300)
GPU Status	2d_canvas: enabled checker_imaging: disabled_off flash_3d: enabled flash_stage3d: enabled flash_stage3d_baseline: enabled gpu_compositing: enabled multiple_raster_threads: enabled_on native_gpu_memory_buffers: disabled_software rasterization: enabled surface_synchronization: enabled_on video_decode: enabled webgl: enabled webgl2: enabled
Load (avg)	undefined
Memory (System)	7.95GB (3.06GB free)
Process Argv
Screen Reader	no
VM	0%

Item	Value
Remote	WSL
OS	Linux x64 4.4.0-18898-Microsoft
CPUs	Intel(R) Xeon(R) CPU E3-1230 v3 @ 3.30GHz (8 x 3301)
Memory (System)	7.95GB (3.06GB free)
VM	0%

Extensions (10)

Extension	Author (truncated)	Version
prettier-vscode	esb	1.9.0
vsc-material-theme	Equ	2.9.0
remote-containers	ms-	0.57.0
remote-ssh	ms-	0.41.0
remote-ssh-edit	ms-	0.41.0
remote-ssh-explorer	ms-	0.41.0
remote-wsl	ms-	0.37.0
vscode-remote-extensionpack	ms-	0.14.0
material-icon-theme	PKi	3.8.0
vscode-icons	vsc	8.7.0

(1 theme extensions excluded)

[guohuamin]

I take some screenshots:

I can reference my variable in project with auto import .

I try to use react dep, the auto import can work.

The Auto Import has such some problem, when I try to reference "material-ui" dep.

The Auto Import doesn't work for 'lodash' or 'react-router-dom'deps.
Why can't it work??

[mjbvz]

@RyanCavanaugh I believe this is the same issue as #30033 (comment)

Since we keep seeing this issue being reported, is there some way we could look into improving the user experience? Maybe eagerly allowing auto imports from any package explicitly listed in the package.json?

[nicojs]

Seems to be a duplicate of #31676 It's just a matter of time before more *.d.ts declaration files get corrupted.

[fatcerberus]

This is about auto-imports in VSCode, that other thing is about declaration file generation which doesn’t sound related at all?

[guohuamin]

not relate at all.

[nicojs]

Sorry, my bad. The effect of #31676 is that imports suggested by vscode are "not working". That's why I jumped to conclusions.

[RyanCavanaugh]

Since we keep seeing this issue being reported, is there some way we could look into improving the user experience? Maybe eagerly allowing auto imports from any package explicitly listed in the package.json?

The more consistent feedback I hear from VS Code is that people want things to be fast, and this is certainly something that will make things slower. Auto-import is a best-effort feature (it's impossible for us to exhaustively list every possible correct import path) and the behavior we have here lights up as expected after the first import in any location.

[mjbvz]

Actually, unless I am misunderstanding the issue, it does seem like there is a bug with lodash auto imports. Even after adding an import, I don't get auto import suggestions for many functions

repo

1. Install lodash

2. In a js file:

   //@ts-check
   import {multiply} from 'lodash';
   
   multiply(1, 2);

3. Type add

Bug
No suggestion for an auto import from lodash for add even though we already import from it

[typescript-bot]

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

[tresdev]

This is happening to me also on my current project. Funny thing is, when I created a new react project based on typescript(that uses .tsx extension only) using CRA, it didn't happen.

[andrewbranch]

TL;DR

• Part expected behavior (Auto Import not working with node_modules #30033)
• Part TS bug (Global completion / Auto import for JavaScript symbols from modules without typings included. #33289)
• Part @types/lodash bug ([lodash] type definitions don’t support auto-imports DefinitelyTyped/DefinitelyTyped#38787)

---

Ok, so there are three things happening here.

I start to try to type "add" or "mul" , it can show these variables that can import auto

Yep, because these are defined in local (non-node_modules) files, so they’re eagerly loaded into your program by default.

If I want to reference "Component", "useState" or "useEffect" from React library dep, when I try to type "Com.." or "use..", I foud that auto import can work

These work because React doesn’t ship their own types, so @types/react will be downloaded by VS Code / TS Server under the hood. Anything in @types is also eagerly loaded into your program, so you get auto imports right away.

But, if I want to reference some variable from 'lodash','react-router-dom' and '@material-ui/core', and I try typing some suffix word, I found that the auto import doesnt' work! Atfer I first add "import {} from '@material-ui/core'", I try to type "Button" or "Paper", the result in that auto import feature help me to write "Button, Paper" in the { } curly in "@material-ui/core"

Ok, this is where it gets interesting, because the reason each of these doesn’t work right away is different. One by one, in reverse order:

@material-ui/core

Yep! This one is expected behavior, and is another instance of #30033. Because @material-ui/core ships its own types, the type definitions are in node_modules and not under node_modules/@types, which means that they don’t get loaded into your program until the first time you import something from that package. It’s worth noting again that this import can be anywhere, so as soon as even one file makes an import from the package, you’ll get auto-imports for the entire package in any file in your project.

react-router-dom

This one is a TypeScript bug that only comes up for JavaScript users, tracked specifically by #33289.

lodash

Ah, so this one is actually due to the way lodash has written their typings on DefinitelyTyped. When you import { add } from 'lodash', according to the type definitions, you’re actually destructuring a method off a CommonJS export. I’ve opened DefinitelyTyped/DefinitelyTyped#38787 to track.

Given that these are now all tracked by separate specific issues, I’m going to go ahead and mark as duplicate so this one mega-issue can be closed. Thanks @guohuamin for the very detailed report 🌟

[andrewbranch]

Re lodash typings: one of the maintainers points out that if you’re using a compatible build system, you can use lodash-es package, whose typings work with auto-imports correctly.

[typescript-bot]

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

[AbuDawood]

I have another problem,,
visual studio 2019 community,
for the autocomplete during import the suggested modules are as expected (module name without extension), However, when typing ex. a class name and want to auto-import the incloser module it gets added with .js extension !! what's wrong

[andrewbranch]

@AbuDawood please open a new issue with repro steps, TypeScript version, etc.

[AbuDawood]

Yes @andrewbranch I did, in #35926

• Visual Studio Comunity 2019
• TS 3.7.2

[AndreVanKammen]

I have another problem,,
visual studio 2019 community,
for the autocomplete during import the suggested modules are as expected (module name without extension), However, when typing ex. a class name and want to auto-import the incloser module it gets added with .js extension !! what's wrong

That's not wrong, without extension is only supported with tools, officially you need to add the extension (it even was .mjs for modules but no-one uses that). I'm programming clean vanilla js and was annoyed it left the extension out on the 1st import it created. Apparently it looks at the rest of the imports and adopts which is fine and smart. Don't know why you got the opposite result.