[Feature] Support the imports field in the PnP API

[merceyz]

• I'd be willing to implement this feature (contributing guide)
• This feature is important to have in this repository; a contrib plugin wouldn't do

Describe the user story

Node supports an imports field in package.json that the PnP API doesn't support yet.
https://nodejs.org/dist/latest-v16.x/docs/api/packages.html#imports

Describe the solution you'd like

The PnP API should be updated to support it so packages that use it can work with PnP.

• Extract resolution algorithm for imports lukeed/resolve.exports#14

Describe the drawbacks of your solution

N/A

Describe alternatives you've considered

N/A

[elado]

Some packages like chalk are now broken on PnP due to the usage of imports - chalk/chalk#531

[jameslawson]

Fwiw: I recently encountered the same problem when installing latest version of Google zx@ 5.0.0 as they recently (4 days ago) upgraded their dependency on chalk to v5.0.0.

Error: chalk tried to access #ansi-styles, but it isn't declared in its dependencies; this makes the require call ambiguous and unsound.

Using v4.3.0 of zx with yarn PnP works ok and is the workaround I'm using for now.

[soanvig]

I bump this. It looks like a serious problem. I encountered this in ava which has chalk dependency.

[flex-jonghyen]

Someone have any workaround for this?

[soanvig]

I downgrade packages that use that. Fortunately there isn't a lot of them, mostly none.

[bright-and-early]

Is this work planned or in progress currently? I'd be happy to make an attempt to get this working.

[Kurt-von-Laven]

I am not affiliated with Yarn, but I, for one, would greatly appreciate that! We are trying to use AVA with Yarn PnP and ESM, and right now that simply isn’t possible to my knowledge. Unfortunately the first version of AVA with ESM support depends on the first version of Chalk that uses the imports field of package.json, so we aren’t able to downgrade.

[Kurt-von-Laven]

There may be a general workaround involving packageExtensions and the npm: protocol mirroring the package.json imports. I haven't managed to get that to work with AVA v4, unfortunately, but it may suffice for other cases. To mirror chalk's imports, I added the following to my .yarnrc.yml:

packageExtensions:
  chalk@5.0.1:
    dependencies:
      "#ansi-styles": npm:ansi-styles@6.1.0
      "#supports-color": npm:supports-color@9.2.2

At least AVA loads. yarn run ava gives the following error the first time a test attempts to import anything though:

✖ some.test.ts exited due to an error:

  Error [ERR_MODULE_NOT_FOUND]: Cannot find package 'testdouble' imported from <project-directory>
  Did you mean to import testdouble-npm-3.16.5-86a5757ed8-4d7e4fca63.zip/node_modules/testdouble/lib/index.js?

  Error [ERR_MODULE_NOT_FOUND]: Cannot find package 'testdouble' imported from <project-directory>
  Did you mean to import testdouble-npm-3.16.5-86a5757ed8-4d7e4fca63.zip/node_modules/testdouble/lib/index.js?
      at __node_internal_captureLargerStackTrace (node:internal/errors:465:5)
      at new NodeError (node:internal/errors:372:5)
      at packageResolve (node:internal/modules/esm/resolve:954:9)
      at moduleResolve (node:internal/modules/esm/resolve:1003:20)
      at defaultResolve (node:internal/modules/esm/resolve:1218:11)
      at ESMLoader.resolve (node:internal/modules/esm/loader:580:30)
      at ESMLoader.getModuleJob (node:internal/modules/esm/loader:294:18)
      at ESMLoader.import (node:internal/modules/esm/loader:380:22)
      at initializeLoader (node:internal/process/esm_loader:74:49)
      at loadESM (node:internal/process/esm_loader:87:11)
      at runMainESM (node:internal/modules/run_main:51:21)
      at Function.executeUserEntryPoint [as runMain] (node:internal/modules/run_main:74:5)
      at MessagePort.<anonymous> (node:internal/main/worker_thread:191:24)
      at MessagePort.[nodejs.internal.kHybridDispatch] (node:internal/event_target:643:20)
      at MessagePort.exports.emitMessage (node:internal/per_context/messageport:23:28)


node:internal/process/promises:279
            triggerUncaughtException(err, true /* fromPromise */);
            ^
Error [ERR_MODULE_NOT_FOUND]: Cannot find package 'testdouble' imported from <project-directory>
Did you mean to import testdouble-npm-3.16.5-86a5757ed8-4d7e4fca63.zip/node_modules/testdouble/lib/index.js?
    at __node_internal_captureLargerStackTrace (node:internal/errors:465:5)
    at new NodeError (node:internal/errors:372:5)
    at packageResolve (node:internal/modules/esm/resolve:954:9)
    at moduleResolve (node:internal/modules/esm/resolve:1003:20)
    at defaultResolve (node:internal/modules/esm/resolve:1218:11)
    at ESMLoader.resolve (node:internal/modules/esm/loader:580:30)
    at ESMLoader.getModuleJob (node:internal/modules/esm/loader:294:18)
    at ESMLoader.import (node:internal/modules/esm/loader:380:22)
    at initializeLoader (node:internal/process/esm_loader:74:49)
    at loadESM (node:internal/process/esm_loader:87:11)
    at runMainESM (node:internal/modules/run_main:51:21)
    at Function.executeUserEntryPoint [as runMain] (node:internal/modules/run_main:74:5)
    at MessagePort.<anonymous> (node:internal/main/worker_thread:191:24)
    at MessagePort.[nodejs.internal.kHybridDispatch] (node:internal/event_target:643:20)
    at MessagePort.exports.emitMessage (node:internal/per_context/messageport:23:28) {
  code: 'ERR_MODULE_NOT_FOUND'
}

AVA creates a node_modules directory, which makes me wonder if it may be incompatible with PnP in deeper ways beyond simply depending on chalk. I am on Node.js 16.15.0, Yarn 3.2.1, AVA 4.3.0, @ava/typescript 3.0.1, and TypeScript 4.7.2. If anyone has any suggestions or can report back whether using packageExtensions in conjunction with the npm: protocol (or similar) worked for them, I would greatly appreciate it.

[Kurt-von-Laven]

Turns out the crash had nothing to do with AVA. It was simply caused by the lack of support for chaining loaders in Node.js.

[Kurt-von-Laven]

Please see this workaround in the meantime.

[Josh-Cena]

Running into this in facebook/docusaurus#7684. Tried yarn config set packageExtensions --json '{ "chalk@5.0.1": { "dependencies": { "#ansi-styles": "npm:ansi-styles@^6.1.0", "#supports-color": "npm:supports-color@^9.2.2", "ansi-styles": "^6.1.0", "supports-color": "^9.2.2" } } } but still telling me the dependency is missing. Am I missing something?

[Kurt-von-Laven]

I don't know for sure, but all I can tell you is that I didn't use ^ in the versions or use the command line to set the config. Other than that, maybe try wiping your cache and re-installing all of your packages?