Setting paths in tsconfig.json does not work

[nareshbhatia]

I am trying to set the src directory as a path so that modules can be imported with short absolute paths (without ../../ etc.). For example:

import { Titlebar } from 'core/components';

instead of

import { Titlebar } from '../core/components';

To accomplish this I added the following to tsconfig.json:

"baseUrl": ".",
"paths": {
  "*": [
    "*",
    "src/*"
  ]
}

However this is still not picking up imports with absolute paths. I get an error like this:

Module not found: Error: Can't resolve 'core/components' in '/Users/nbhati/projects/react-mobx-mui-ts-seed/src/features'

I have created a small example to demonstrate this problem. Please see my repository at https://github.com/archfirst/react-mobx-mui-ts-seed. The import shown above is here: https://github.com/archfirst/react-mobx-mui-ts-seed/blob/master/src/features/home-page.tsx#L9.

[Grmiade]

Set a .env file with:

NODE_PATH=src

I use this config:

{
  ...
  "baseUrl": "src",
  ...
}

It works for me :)

[nareshbhatia]

Awesome! Thanks, @Grmiade. This is such a common use case that I was surprised not to find a solution readily. So thanks again!

I wonder why both are required and how they both work to make this work.

[Grmiade]

NODE_PATH=src is useful for webpack whereas "baseUrl": "src" is only used by your IDE in your case. tsconfig.json is used when you run tsc command. But here, you use webpack to compile your project, so it's webpack which resolve your paths ;)

[nareshbhatia]

@Grmiade, thanks for the explanation. It's helpful to know what's doing what!

[rohmanhm]

@Grmiade how about if the path is not wildcard. How if I added @/* instead just *
Example

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

[Grmiade]

Hum, I think the only way is to eject your project and update resolve.alias in your webpack config :/

[stiofand]

None of the above solutions solve the issue mentioned. There is a glaring discrepancy between create-react-app and typescript paths, but despite all these "closed" issues, it is still broken" Since we cant solve the wbepack issue without ejecting, the solution by @Grmiade is not available.

[Grmiade]

@stevematdavies Can you share your .env and tsconfig.json files?
This solution always works for me.

[vehsakul]

@Grmiade Should not tsloader used by webpack respect what I write in tsconfig.json?