Today I faced a complex Typescript situation related with a library, .d.ts files and relative paths.
We publish a library of React Components (including the types) to npm.
Our front-end projects include this library as any other npm package.
Usually our front-end projects have in their tsconfig.json
the option "skipLibCheck: true"
One of our apps didn't have this flag (by default this flag is disabled and honestly i don't get who would want this behavior)
thing is, the flag wasn't there and we were getting a ts-error:
And it was a fair error: the distributed file from our library was trying to import something from an absolute path
import { Foo } from 'absolutePath';
this line makes sense in the library itself but not in node_modules/bla/bla/bla
Ts is right: is this absolutePath here with us?
Digging in the dist/
folder i checked that some resulting component files where properly transpiled using relative paths:
PANIC MOMENT: Why some transpiled .d.ts files are using absolute paths while others use relative paths 🤔🤔🤔🤔
Several Stack Overflow posts and issues, threads and discussions at GitHub later (i will skip what didn't work)
I noticed this vite warning in build time:
Export of «module» was reexported through «file»
while both modules are dependencies of each other
and will end up in different chunks by Rollup.
so... Circular Dependencies it is.
I solved the circular dependencies in our import statements and everything is fine now.
TL;DR
If you are facing issues with Ts 🟦 transpiling absolute path statements instead of relative paths in your library,
which results in a Ts-error in the client app, it could be due to a circular dependency in your source code.
--
thanks for reading