Missing auto import suggestions for UMD modules such as `classnames`

[OliverJAsh]

• VSCode Version: 1.51.1
• OS Version: 11.0.1

Steps to Reproduce:

import * as React from 'react';

const el = <div className={REPLACE_ME}>foo</div>;

1. yarn add @types/classnames
2. Erase REPLACE_ME and begin typing classNames

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

Expected: VS Code suggests an auto import of classNames from module 'classnames'.

Actual: no suggested auto import.

I believe this is something to do with the fact that classnames is defined as a UMD module. If I change the type definitions for classnames to remove the UMD definition, the auto import does work correctly:

---

Note that VS Code does correctly provide import suggestions after we've finished typing the identifier, when we move our cursor.

This issue is specifically about auto imports inside the suggestions that appear as you're typing.

[aminpaks]

Would someone guide me how I can easily get to a point to reproduce this locally?

Not very familiar how code fixes work for node_modules/@types/... and requesting a code completion at a specific point.

Found how to work with completions in cases/fourslash/tsxCompletionXX.ts

[aminpaks]

It turns out this case happens cause the completion ends up within a {..} and current implementation looks up for destructuring of an object.

Trying to find a good spot to add the completion logic...

Update: the comment above only happens if the file extension is .js including JSX... Maybe we should look into that as well but I wanna focus on a fix of auto import for the global module.

[aminpaks]

@OliverJAsh is the issue occurs within JSX/TSX language variant or JS?

Ya I can finally reproduce this constantly. As you mentioned it's related to CommonJS module as they have the following export declaration

declare const someModule: () => void;
export = someModule;

[OliverJAsh]

@OliverJAsh is the issue occurs within JSX/TSX language variant or JS?

I think I only tested it with TSX. Not sure if it occurs in other languages.

[aminpaks]

@OliverJAsh would you also provide a simplified version of your TS config? specially how you configured the modules.

there are settings that I'm interested to see:
https://www.typescriptlang.org/tsconfig#module
https://www.typescriptlang.org/tsconfig#esModuleInterop
https://www.typescriptlang.org/tsconfig#allowSyntheticDefaultImports

[aminpaks]

To be honest at this point I'm not sure if this is a bug or the correct behaviour. The code fix works though I'm not sure if auto import should be provided or even how auto import works in TypeScript/VSCode.

I would need some help to investigate more.

Added a new fourslash test here:
#42141