Absolute paths, tsc complains it can't find the module

[AleskiWeb]

Using this package with vs-code and when I am importing via the absolute path using the package.json file it tells me it can't find it. It still transpiles and works but it's kind of annoying.

I've seens some solutions include an index.d.ts file and declare the module there, for example:

In app.tsx
import HeaderComponent from 'src/HeaderComponent

In same folder as the package.json { "name": "src"} named index.d.ts
declare module src { ... }

However I'm not getting much luck with it. Have you ran into such an IDE complaint before?

[ds300]

Hi!

I haven't run into that issue before. Did you make sure the baseUrl property is set in tsconfig.json?

See here for an example.

[AleskiWeb]

I have yeah, like I said, it compiles and works but when I run tsc it tells me it can't find that module. Have you used the paths compiler option before? Seems to be a work around (for ts files atleast) to provide absolute paths.

[ds300]

Hmm the baseUrl property should take care of that, there should be no need for paths. Can I see your tsconfig, an illustration of your directory structure, and an example of an import statement that's not working?

[Slessi]

I have the same issue. In my tsconfig I use

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

But neither of the following work when importing ./src/styles.ts inside file ./src/App.tsx:

import { styles } from "@src/styles";
import { styles } from "src/styles";

Relative import continues to work

import { styles } from "./styles";

Worth nothing that tsc manages to compile the file when using any of the above 3 imports

[ds300]

@Slessi Do you have the file src/package.json containing the contents '{"name": "src"}' ? because then import { styles } from "src/styles"; should work for react-native too.

[Slessi]

@ds300 adding {"name": "src"} to src/package.json does make src/styles work, but really I prefer the combination of index.ts files and baseUrl and paths

[ds300]

Cool, let me know if you find a way to make react-native work with that setup!

[ds300]

I'm going to close this issue due to inactivity. Please open a new issue and link to this one if you're still having trouble with absolute paths! 🙏

[olegsmetanin]

How to avoid 'src' in imports?
import HeaderComponent from 'nav/HeaderComponent' // without src/ in path

[Meligy]

@olegsmetanin not sure if this issue is the best place to ask this question, but you might want to try to set the baseDir in tsconfig.json to ./src and see if that works.

[technoplato]

@Meligy solution worked for me with WebStorm 👍