Home >Web Front-end >JS Tutorial >Ts transpiling absolute path statements in your npm package

Ts transpiling absolute path statements in your npm package

WBOY
WBOYOriginal
2024-08-29 12:41:52943browse

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"

Ts transpiling absolute path statements in your npm package

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)

Ts transpiling absolute path statements in your npm package


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

Ts transpiling absolute path statements in your npm package

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?

Ts transpiling absolute path statements in your npm package

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

Ts transpiling absolute path statements in your npm package


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.

Ts transpiling absolute path statements in your npm package

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

The above is the detailed content of Ts transpiling absolute path statements in your npm package. For more information, please follow other related articles on the PHP Chinese website!

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn