[question] How to use link protocol rather than alias with Pnp / Typescript

[dtouzet]

I wonder how to use the 'link:' protocol, rather than aliases, in a pnp typescript project.

Consider a typical TS project, with a [root]/src/ folder for TS sources, and and a [root]/dist/ folder for compiled js.

Declaration of a link: dependency in the package.json file :

{
  "dependencies": {
     ...
      "helpers": "link:./src/utils/helpers",
    ...
  }
}

And use of this link in a TS file :

import { aFunction } from "helpers/aTsHelperFile";
...

Given that aTsHelperFile is a TS file from the 'src/utils/helpers' folder.

TS compilation step works fine as well as TS-based unit testing.

However running compiled JS code fails while trying to resolve the javascript aTsHelperFile from the src/utils/helpers folder (js files are generated into the dist/ folder).

Exact trace:

Error: Qualified path resolution failed: we looked for the following paths, but none could be accessed.

Source path: [project-path]\src\utils\helpers\aTsHelperFile
Not found: [project-path]\src\utils\helpers\aTsHelperFile
Not found: [project-path]\src\utils\helpers\aTsHelperFile.js
Not found: [project-path]\src\utils\helpers\aTsHelperFile.json
Not found: [project-path]\src\utils\helpers\aTsHelperFile.node
Not found: [project-path]\src\utils\helpers\aTsHelperFile.handlebars
Not found: [project-path]\src\utils\helpers\aTsHelperFile.hbs

Is there a way to make 'link:' resolution work on both src/ and dist/ folders ?

[dtouzet]

Here is a small archive illustrating my problem.

yarn dev OK

But:

yarn build
yarn start

KO

testapp.zip

[merceyz]

link: is meant for workspaces that will be bundled or run as is, if you need a conditional import you can use subpath imports
https://nodejs.org/dist/latest-v18.x/docs/api/packages.html#subpath-imports

[dtouzet]

Thanks for your answer.

The way the feature is described on https://yarnpkg.com/features/protocols#why-is-the-link-protocol-recommended-over-aliases-for-path-mapping is quite confusing.

Not sure the provided example, with links to src/ folder is the most relevant, since it won't run in most common typescript use cases.