DEV Community

Manuel Artero Anguita 🟨
Manuel Artero Anguita 🟨

Posted on

2

Ts transpiling absolute path statements in your npm package

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"

tsconfig

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)

meme: at this point im afraid to ask


thing is, the flag wasn't there and we were getting a ts-error:

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';


Enter fullscreen mode Exit fullscreen mode

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?

meme: is here with us?

Digging in the dist/ folder i checked that some resulting component files where properly transpiled using relative paths:

correct transpiled code


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.


Enter fullscreen mode Exit fullscreen mode

vite build warning

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

My Original Thread at X

SurveyJS custom survey software

JavaScript UI Libraries for Surveys and Forms

SurveyJS lets you build a JSON-based form management system that integrates with any backend, giving you full control over your data and no user limits. Includes support for custom question types, skip logic, integrated CCS editor, PDF export, real-time analytics & more.

Learn more

Top comments (0)

Billboard image

Create up to 10 Postgres Databases on Neon's free plan.

If you're starting a new project, Neon has got your databases covered. No credit cards. No trials. No getting in your way.

Try Neon for Free →

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay