microsoft / TypeScript

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

Auto-import not using up TypeScript path alias when using barrel export (index.ts) #55863

Closed dd-jonas closed 4 months ago

dd-jonas commented 1 year ago

Type: Bug

tsconfig.ts:

{
  "compilerOptions": {
    "allowJs": false,
    "allowSyntheticDefaultImports": true,
    "baseUrl": "./src",
    "esModuleInterop": true,
    "forceConsistentCasingInFileNames": true,
    "isolatedModules": true,
    "jsx": "react-jsx",
    "lib": ["dom", "dom.iterable", "esnext"],
    "module": "esnext",
    "moduleResolution": "node",
    "noEmit": true,
    "noFallthroughCasesInSwitch": true,
    "outDir": "dist",
    "paths": {
      "~/api": ["api/index.ts"],
      "~/assets/*": ["assets/*"],
      "~/components": ["components/index.ts"],
      "~/constants/*": ["constants/*"],
      "~/hooks": ["hooks/index.ts"],
      "~/pages/*": ["pages/*"],
      "~/router": ["router/index.tsx"],
      "~/schemas": ["schemas/index.ts"],
      "~/store": ["store/index.ts"],
      "~/store/*": ["store/*"],
      "~/styles/*": ["styles/*"],
      "~/translations/*": ["translations/*"],
      "~/types": ["types/index.ts"],
      "~/utils": ["utils/index.ts"]
    },
    "resolveJsonModule": true,
    "skipLibCheck": true,
    "strict": true,
    "target": "ESNEXT"
  }
}
  1. When I type useModal, I get the import suggestion hooks/useModal. I would expect the suggestion ~/hooks instead, as this function is exported from hooks/index.ts as specified in my tsconfig file.
  2. When I type EMAIL, I get the expected import suggestion ~/constants/regex. The difference in behavior seems to be caused by using barrel export files (re-exporting all submodules in index.ts).

The exports in all index.ts files are specified as e.g. export * from './useModal'. It seems to make no difference when I change it to export { useModal } from './useModal'. I have also tried enabling "typescript.preferences.importModuleSpecifier": "non-relative" which makes no difference.
Disabling all extensions has no effect.

Is there a way to solve this problem? It's annoying currently to always update the import manually.


VS Code version: Code 1.82.0 (8b617bd08fd9e3fc94d14adb8d358b56e3f72314, 2023-09-06T22:08:29.670Z) OS version: Darwin arm64 22.4.0 Modes:

System Info |Item|Value| |---|---| |CPUs|Apple M2 (8 x 24)| |GPU Status|2d_canvas: enabled
canvas_oop_rasterization: enabled_on
direct_rendering_display_compositor: disabled_off_ok
gpu_compositing: enabled
multiple_raster_threads: enabled_on
opengl: enabled_on
rasterization: enabled
raw_draw: disabled_off_ok
video_decode: enabled
video_encode: enabled
vulkan: disabled_off
webgl: enabled
webgl2: enabled
webgpu: enabled| |Load (avg)|6, 4, 4| |Memory (System)|16.00GB (0.14GB free)| |Process Argv|--crash-reporter-id 4debfa25-ee5c-42dd-bb8b-59d36f34e883| |Screen Reader|no| |VM|0%|
Extensions (20) Extension|Author (truncated)|Version ---|---|--- TabOut|alb|0.2.2 increment-selection|alb|0.2.0 laravel-extra-intellisense|ami|0.6.3 vscode-intelephense-client|bme|1.9.5 vscode-tailwindcss|bra|0.10.0 laravel-goto-view|cod|1.3.9 vscode-eslint|dba|2.4.2 gitlens|eam|14.3.0 vscode-great-icons|emm|2.1.102 prettier-vscode|esb|10.1.0 find-unused-exports|iul|2.0.1 template-string-converter|meg|0.6.1 vscode-docker|ms-|1.26.0 playwright|ms-|1.0.15 laravel-blade|one|1.34.0 laravel-pint|ope|1.1.4 vscode-import-cost|wix|3.3.0 change-case|wma|1.0.0 pretty-ts-errors|yoa|0.5.2 markdown-all-in-one|yzh|3.5.1 (1 theme extensions excluded)
A/B Experiments ``` vsliv368cf:30146710 vsreu685:30147344 python383:30185418 vspor879:30202332 vspor708:30202333 vspor363:30204092 vslsvsres303:30308271 vserr242cf:30382550 pythontb:30283811 vsjup518:30340749 pythonptprofiler:30281270 vshan820:30294714 vstes263:30335439 vscoreces:30445986 vscod805:30301674 binariesv615:30325510 bridge0708:30335490 bridge0723:30353136 vsaa593cf:30376535 pythonvs932:30410667 py29gd2263:30792226 vsclangdc:30486549 c4g48928:30535728 dsvsc012:30540252 pynewext54:30695312 azure-dev_surveyone:30548225 vscccc:30803845 282f8724:30602487 89544117:30613380 a9j8j154:30646983 showlangstatbar:30737416 0bi6i642:30835152 a2ce3375:30757347 pythonfmttext:30731395 fixshowwlkth:30771522 showindicator:30805244 pythongtdpath:30769146 i26e3531:30792625 pythonnosmt12:30797651 pythonidxptcf:30805731 pythonnoceb:30805159 copilotsettingt:30839829 asynctok:30821568 dsvsc013:30795093 dsvsc014:30804076 diffeditorv2:30821572 dsvsc015cf:30829746 ```
VSCodeTriageBot commented 1 year ago

Thanks for creating this issue! It looks like you may be using an old version of VS Code, the latest stable release is 1.82.2. Please try upgrading to the latest version and checking whether this issue remains.

Happy Coding!

RyanCavanaugh commented 11 months ago

We'd need a demo repo to understand what's going on here. There are many variables at play when determining auto-import priority

dd-jonas commented 11 months ago

Hi @RyanCavanaugh, I made a reproduction here: https://github.com/dd-jonas/tsconfig-path-alias-autocomplete. While making this reproduction, I noticed the '/' in the path alias is the culprit (e.g. "~/api" does not work but "~api" does). Is this a bug or expected behavior?

RyanCavanaugh commented 11 months ago

Confirmed we're not using withIndex even with import preference set to non-relative and removing baseUrl from the tsconfig

mwood23 commented 5 months ago

Hey! Did this get into typescript 5.4 by chance?