Usage of Node CLI's --loader option with PnP

[tavoyne]

Hi there,

I'm using Yarn v3.2.0-rc.13. In order to execute Typescript/ESM files from the console, I take advantage of ts-node and its ts-node/esm loader via the following command:

yarn node --loader ts-node/esm scripts/build.ts

Although ts-node is installed, I'm getting an [ERR_MODULE_NOT_FOUND]: Cannot find package 'ts-node' error.

It seems that what's specified via the --loader option is not resolved via PnP.

Any workaround? Should I open an issue?

Note: everything works well if I unplug ts-node or if I set nodeLinker to node-modules.

[arcanis]

This is a current limitation of the Node loader API, Yarn itself cannot address that. You can follow the discussion on the Node repo:

• Loader chaining *while loading loaders* nodejs/loaders#56
• esm: add chaining to loaders nodejs/node#42623

[tavoyne]

Hi @arcanis, do you know if there's any progress on that? I see that the linked PR was merged but I still can't run yarn node --loader ts-node/esm scripts/build.ts (I'm on [email protected] now).

[merceyz]

The upstream PR is merged but not released yet, even when it's released it probably wont work since Node.js doesn't use the loaders to load other loaders.

[tavoyne]

Oh I see... Any workaround for using ts-node with PnP and ESM?

[josuevalrob]

updates?

[merceyz]

You can follow nodejs/node#43772

[koistya]

@tavoyne you can use babel-node to run .ts scripts for now (using @babel/node instead of ts-node, converting TypeScript into CommonJS behind the hood):

$ babel-node -x .ts ./scripts/build.ts

You can find a complete example in Relay Starter Kit → db (scripts)

[tavoyne]

Will try that, thanks!

[tavoyne]

@babel/node doesn't work with ESM yet 😥

See:

• Support ES Modules in @babel/preset-typescript babel/babel#14219
• [Feat]: Support "type": "module" in package.json for @babel/node babel/babel#14312

[marchaos]

loader chaining was merged recently - see nodejs/node#42623

[merceyz]

We are aware, see #4044 (reply in thread)

[VulgarnyKarlson]

https://github.com/nodejs/node/releases/tag/v16.17.0
updated at 16 august ( merged )

chaining loader are now supporting by 16.17.0
Can you are update ?

[VulgarnyKarlson]

so yarn berry will not support ts-node until node will not release loading loaders in loaders ? @merceyz

[VulgarnyKarlson]

i using currently nodeLinker: node-modules but .yarn storage seems like much better

[VulgarnyKarlson]

@merceyz as i correctly understand - you are can't update casue it's not even released , but at 16 august it's released in v16.17.0

[merceyz]

Something like nodejs/node#43772 needs to land upstream for this to work.

[VulgarnyKarlson]

https://github.com/nodejs/node/releases/tag/v19.6.0
Looks like we got update of ts-loader, is it enough to implement ?

[faces-of-eth]

Bummer that we cannot use Yarn PNP with ts-node, or do much to change things until other projects get some things landed. Is there any workaround currently for running Typescript command-line scripts while using Yarn PNP?

[neongreen]

A workaround that works for me is using esbuild, which supports Yarn PnP and transpiling single modules (unlike tsc).

yarn add -D esbuild    # NB: 0.15 didn't work for me, 0.17 did
yarn esbuild tools/whatever.ts --bundle --platform=node | yarn node

It will pick up the tsconfig automatically, but you can also give it --tsconfig=....

Here's an example from my own project, the "scripts" section in package.json:

{
  "name": "ches",
  "scripts": {
    ...,
    "sample-games": "rm sample-games/*.txt; esbuild tools/sample-games.ts --bundle --platform=node | node"
  },
  "devDependencies": {
    ...,
    "esbuild": "^0.17.0",
  },

[rtritto]

ts-import should be a workaround (the entrypoint file in script needs to be converted to .js).

[vonagam]

Since #43772 was merged in node 19.6.0 it seems to be possible to run esm typescript with ts-node and yarn pnp:

yarn node --loader ts-node/esm --loader .pnp.loader.mjs file.ts

But to import other ts/tsx files by a full path with ".js" extension (as esm requires) had to write a small custom loader:

Custom loader code

// .pnp-ts.loader.mjs
import Path from 'node:path';
import URL from 'node:url';
import FS from 'node:fs';


const mapping = new Map([
  ['.js', ['.js', '.ts', '.tsx', '.jsx']],
  ['.cjs', ['.cjs', '.cts']],
  ['.mjs', ['.mjs', '.mts']],
  ['.jsx', ['.jsx', '.tsx']],
]);

export function resolve(specifier, context, next) {
  if (!specifier.startsWith('.')) {
    return next(specifier, context);
  }

  const parentURL = context.parentURL;
  if (!parentURL || !parentURL.startsWith('file:') || parentURL.includes('/.yarn/')) {
    return next(specifier, context);
  }

  const specifiedExtension = Path.extname(specifier);
  const sourceExtensions = mapping.get(specifiedExtension);
  if (!sourceExtensions) {
    return next(specifier, context);
  }

  const location = Path.dirname(URL.fileURLToPath(parentURL));
  const required = specifier.slice(0, -specifiedExtension.length);
  const path = Path.join(location, required);
  for (const sourceExtension of sourceExtensions) {
    if (FS.existsSync(path + sourceExtension)) {
      return next(required + sourceExtension, context);
    }
  }

  return next(specifier, context);
}

Also, there is @esbuild-kit/esm-loader which transpiles typescript into esm on the fly (without type validations, but super fast) and now it is compatible with yarn without custom things for that purpose:

yarn node --loader @esbuild-kit/esm-loader file.ts

[EmilIvanichkovv]

Awesome!
Thank you for sharing!!!

@arcanis Can you mark this comment as answer?

[lizthegrey]

Confirmed that using a version of Node compiled with nodejs/node#43772 results in chain loading Yarn PNP and another loader (in our case, it's for hotpatching ESM modules with https://github.com/DataDog/import-in-the-middle) succeeding.