TypeScript: TS Paths not working with index.ts when using a wildcard - more explained inside

A fair warning for anyone with similar issue as I had. My jsconfig.json:

{
    "compilerOptions": {
        "baseUrl": ".",
        "paths": {
            "@api/*": ["api/*"],
            "@components/*": ["components/*"],
            "@redux/*": ["redux/*"],
            "@slices/*": ["redux/slices/*"],
        },
        "module": "commonJS"
    },
    "exclude": [
        "build",
        "node_modules",
        "public"
    ],
}

Now in some JavaScrpt file, this will not work:

import { fetch } from '@api';

But the following will:

import { fetch } from '@api/index';

The reason is quite simple although took me a while to realize it. This line:

        "@api/*": ["api/*"],

Only works for @api/* (the forward slash is the most crucial here). Defining another path, e.g. "@api": ["api/index.js"], will allow you to import from @api without specifying index.

FWIW I just got stuck on this but I think I solved it. Adding "module": "commonjs" to compilerOptions got it working for me.

My jsconfig.json:

{
  "compilerOptions": {
    "target": "es2017",
    "allowSyntheticDefaultImports": false,
    "baseUrl": ".",
    "paths": {
      "app/*": ["src/app/*"],
    },
    "jsx": "react",
    "checkJs": true,
    "module": "commonjs"
  },
  "exclude": ["node_modules", "dist"]
}

Any plans on this issue? In ES6, having an index.js file in a folder lets you perform an import from the folder implicitly without specifying the index.js. Why not to follow specs, as it is widely used?

Adding multiple entries solved it for me (one with /* and one without /*)

"module": "commonjs"

Why closed? Is the issue is fixed for VSCode?

This issue has been marked as ‘Question’ and has seen no recent activity. It has been automatically closed for house-keeping purposes. If you’re still waiting on a response, questions are usually better suited to stackoverflow.

Adding multiple entries solved it for me (one with /* and one without /*)

"module": "commonjs"

This is weird of why do we have to do this instead of just @services/* only

Adding multiple entries solved it for me (one with /* and one without /*) "module": "commonjs"

This is weird of why do we have to do this instead of just @services/* only

It work for me, same question with you.

Multiple entries works for me as well, same as example from koiralakiran1; but doesn’t seem like this should be necessary

Restarting vs code works 😃

In my project to solve this problem i’ve added "moduleResolution": "node". Also fixes monorepo issues.

Adding "module": "commonjs" doesn’t work in my case 😞

jsconfig.json

{
  "compilerOptions": {
    "baseUrl": "src",
    "module": "commonjs"
  },
  "include": ["src"],
  "exclude": ["node_modules"]
}

FWIW I just got stuck on this but I think I solved it. Adding "module": "commonjs" to compilerOptions got it working for me.

My jsconfig.json:

{
  "compilerOptions": {
    "target": "es2017",
    "allowSyntheticDefaultImports": false,
    "baseUrl": ".",
    "paths": {
      "app/*": ["src/app/*"],
    },
    "jsx": "react",
    "checkJs": true,
    "module": "commonjs"
  },
  "exclude": ["node_modules", "dist"]
}

Yeah, that helped 🎉

Got here following this issue https://github.com/Microsoft/vscode/issues/57096

I have a similar problem where vscode can’t resolve index.js on a jsconfig.json wildcard defined path. Will this ever be resolved?

Would love to see how jest handles this, or something similar. ie:

"moduleNameMapper": {
  "^@/(.*)$": "<rootDir>/src/$1"
}

Edit: I guess I’m seeing that vue spins up with a tsconfig.json that includes:

"paths": {
  "@/*": [
    "src/*"
  ]

I’m just not getting proper definition following in VSCode’s IDE. I don’t remember which original story deferred me to here (it’s been a couple deep now), but it sounded like VSCode said it was in the hands of TypeScript.

edit2: TypeScript compiles fine, but for whatever reason using the find definition of VSCode just points to a shims-vue.d.ts file instead of the imported file when clicking on the import path or imported class/component.

Installing tsconfig-paths with npm i -D tsconfig-paths and adding this

"ts-node": { "require": ["tsconfig-paths/register"] }

in tsconfig.json solved it for me:

Can someone explain why changing module and/or moduleResolution works for only some people? Doesn’t work for me with an otherwise default jsconfig.json.

I’ve gone with the same solution as OP for now.