microsoft / TypeScript

TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
https://www.typescriptlang.org
Apache License 2.0
101.11k stars 12.5k forks source link

Auto import with wildcard imports with expanded path #51398

Closed dtdesign closed 3 weeks ago

dtdesign commented 2 years ago

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

Context

We are maintaining TypeScript projects across multiple repositories with one repository being the primary framework that provides the majority of the functionality. For historic reasons we are using an AMD-based module bundler (require.js) that expects fully qualified paths for module dependencies.

Project Configuration

We are referencing this main project in the package.json using a commit id like this:

{
  "dependencies": {
    "@woltlab/wcf": "https://github.com/WoltLab/WCF.git#f8ba2b43c7fcc6428d61e5c9a31211e46db7f265"
  }
}

In the tsconfig.json we have set up a path wildcard to map references to modules from the primary repository:

{
  "include": [
    "node_modules/@woltlab/wcf/global.d.ts",
    "ts/**/*"
  ],
  "compilerOptions": {
    "module": "amd",
    "rootDir": "ts/",
    "baseUrl": ".",
    "paths": {
      "*": [
        "node_modules/@woltlab/wcf/ts/*"
      ]
    }
  }
}

Observed Behavior

The auto import works, but the generated import expands it to the entire path.

import { dialogFactory } from "@woltlab/wcf/ts/WoltLabSuite/Core/Component/Dialog";

Expected Behavior

Auto imports should be referenced using their full path, but not expanding it to the full path:

import { dialogFactory } from "WoltLabSuite/Core/Component/Dialog";

It is important to note that the TypeScript compiler will correctly resolve and validate the above dependency. This will also generate valid AMD dependencies that can be resolved by our module bundler.

RyanCavanaugh commented 1 year ago

Can you set up a sample repo we can clone? There are a bunch of other factors that go into this we'd need to investigate further

dtdesign commented 1 year ago

Thanks for taking your time @RyanCavanaugh! I have provided a simple reproducer repository that showcases the problem:

https://github.com/dtdesign/typescript-issue-51398

How to reproduce the issue:

  1. Clone the repository.
  2. Run npm i which will install both TypeScript and the source repository for the imports.
  3. Open the repository in VSCode.
  4. Edit the file src/test.ts.
  5. Attempt to import dialogFactory and compare the generated import to the existing import of confirmationFactory.
RyanCavanaugh commented 1 year ago

Thanks for setting that up - it's much clearer in that form. I haven't cloned this yet, but looking at the tree, it looks like you may need to set your "auto import" preference to "non-relative". AI always prefers names that look like properly-qualified module reference over those that come in via baseUrl, even if they're longer. Does changing the preference to "non-relative" create the expected behavior?

image

dtdesign commented 1 year ago

I’ve tried both “non-relative” and “project-relative”, but none of them appear to make a difference. In addition, I have repeated the changes, but with a restart of VSCode each time, just to make sure nothing got stuck. The IDE was previously set up with the default value of “shortest”.

I have tested the behavior for the same import of dialogFactory in the referenced repository itself, another repository that belongs to us as well as inside the test repository I have set up for this issue.

dtdesign commented 1 year ago

May I ask if there is anything else I can provide to help you to identify the cause of this issue?

RyanCavanaugh commented 3 months ago

Reconfirmed the repro on 5.6