Anybody else having trouble with "Click-Through / Go-To Definition" with path aliases and Visual Code?

[FBosler]

I am running a next.js project, as the project grew my imports became harder and harder to read.

Which is why I really love the path aliasing in jsconfig.json. Makes everything so much cleaner.

However, and that's a big one, I used to be able to click on any variable (or import) holding cmd and would be directly taken to the final definition. Same with getting a peek ("Code Peek") into the module/variable that I was importing.

This functionality did not seem to work with aliases. Installing module-resolver helped on the top level. I.e. click-through through is now possible for everything starting with @/Components but not the lower level aliases. Any Idea how to fix that?

Caveats:

• I know I probably should, but I am currently not yet using es-lint,
• Plain Javascript (no typescript)

Configs:

This is my jsconfig.json

{
    "compilerOptions": {
        "baseUrl": ".",
        "paths": {
            "@/Components/*": ["components/*"],
            "@/Concepts/*": ["components/Concepts/*"],
            ...
        }
    }
}

this is my .babelrc

{
  "presets": ["next/babel"],
  "plugins": [
    ["styled-components", { "ssr": true }],
    ["module-resolver", {
      "root": ["."],
      "alias": {
        "@/Components": "components",
        "@/Concepts": "components/Concepts",
        ...
      }
    }]
  ]
}

I am importing like this (both imports work):

Click-through works:
import { Bold } from "@/Components/styles";

Click-through does **not work:**
import { DefaultMarginSlider, Formula } from "@/Concepts/utils";

for completeness sake here is my package.json

I also created a (StackOverflow Post)[https://stackoverflow.com/questions/62382506/visual-studio-code-cick-through-go-to-does-not-work-with-path-aliases-in-jsc]