Yarn 3 and Node 17: file extension resolution fails?

Question

After upgrading to Yarn 3.0 with Yarn Plug'n'Play (throw out node_modules), I started having issues with filename resolution when starting Node.

After successfully starting server.js it tries to resolve the first imported file in the project, called util.js, but path resolution fails unless I explicitly add .js to the filename. I would prefer to not have to update all paths project-wide.

Can I make Yarn and Node resolve the .js file extensions automatically?

Yarn 3.1.0, Node 17.0.1.

yarn node server.js # Automatically uses Yarn's .pnp.cjs, right?

// server.js excerpt
import util from "/tools/util"; // <-- 🛑 No worky
import util from "/tools/util.js"; // <-- ✅ Worky

The error message:

/Users/me/repo/.pnp.cjs:22839
  return Object.defineProperties(new Error(message), {
                                 ^

Error: Qualified path resolution failed - none of those files can be found on the disk.

Source path: /Users/me/repo/server/util
Not found: /Users/me/repo/server/util

    at internalTools_makeError (/Users/me/repo/.pnp.cjs:22839:34)
    at resolveUnqualified (/Users/me/repo/.pnp.cjs:24238:13)
    at resolveRequest (/Users/me/repo/.pnp.cjs:24271:14)
    at Object.resolveRequest (/Users/me/repo/.pnp.cjs:24343:26)
    at resolve$1 (file:///Users/me/repo/.pnp.loader.mjs:205:25)
    at ESMLoader.resolve (node:internal/modules/esm/loader:422:30)
    at ESMLoader.getModuleJob (node:internal/modules/esm/loader:222:40)
    at ModuleWrap.<anonymous> (node:internal/modules/esm/module_job:76:40)
    at link (node:internal/modules/esm/module_job:75:36)

Mainstay

I'm experiencing the exact same thing. Downgrading to node 16 doesn't solve the problem. I'm on yarn 3.1.1 and node 17.4.0. Will report back here when I figure it out. – Rearrange

Answer 1

Unfortunately, if you want/need to keep using ES modules, you have to specify the .js extension in your imports, although they're TS files - https://github.com/microsoft/TypeScript/issues/42151

Sclerosis

The question was not about TypeScript, but thank you. And yes, I ended up rewriting all imports to add .js, which was annoying, but apparently necessary. – Mainstay

Answer 2

I was able to get past this, but not without giving up PnP. Here's how I did it:

First, add --experimental-specifier-resolution=node to the node command that actually runs your code. I'm using typescript, so my final command looks like:

tsc-watch --onSuccess \"node --experimental-specifier-resolution=node ./lib/index.js\"

I was hoping this flag would work with PnP but it didn't. So I went into .yarnrc.yml and added the following line:

nodeLinker: node-modules

After re-running yarn, I was able to yarn dev and run my app. I'm really not sure why PnP didn't work here, but I'm OK sacrificing this "purity" of my local configuration for something that, you know, actually works.

The final piece for those running yarn workspaces and typescript: make sure that your package.json files point towards the compiled javascript, not the typescript files, e.g. for a lib/ output dir:

  "type": "module",
  "main": "lib/index.js",
  "types": "lib/index.d.ts",

Rearrange