[Feature] Support the `imports` field in the PnP API

[merceyz]

• [ ] I'd be willing to implement this feature (contributing guide)
• [x] 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.

• https://github.com/lukeed/resolve.exports/issues/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 - https://github.com/chalk/chalk/issues/531

[ohroy]

pls

[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?

[kristian]

Either use loose mode or you can try to use the packageExtensions field to instruct Yarn about the missing dependency.

[josuevalrob]

any solution so far?

[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:
  [email protected]:
    dependencies:
      "#ansi-styles": npm:[email protected]
      "#supports-color": npm:[email protected]

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.

[michaelfaith]

Any movement on this issue by chance? Just hit it with chalk

[Kurt-von-Laven]

Please see this workaround in the meantime.

[Josh-Cena]

Running into this in https://github.com/facebook/docusaurus/pull/7684. Tried yarn config set packageExtensions --json '{ "[email protected]": { "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?

[dobesv]

Steps to reproduce:

$ mkdir chalk-err
$ cd chalk-err
$ yarn init
yarn init v1.22.19
question name (chalk-err): 
question version (1.0.0): 
question description: 
question entry point (index.js): 
question repository url: 
question author: 
question license (MIT): 
question private: 
success Saved package.json
Done in 5.67s.
$ yarn set version berry
➤ YN0000: Retrieving https://repo.yarnpkg.com/3.2.3/packages/yarnpkg-cli/bin/yarn.js
➤ YN0000: Saving the new release in .yarn/releases/yarn-3.2.3.cjs
➤ YN0000: Done in 0s 547ms
$ yarn add chalk
➤ YN0000: ┌ Resolution step
➤ YN0000: └ Completed
➤ YN0000: ┌ Fetch step
➤ YN0013: │ chalk@npm:5.0.1 can't be found in the cache and will be fetched from the remote registry
➤ YN0000: └ Completed
➤ YN0000: ┌ Link step
➤ YN0000: │ ESM support for PnP uses the experimental loader API and is therefore experimental
➤ YN0000: └ Completed
➤ YN0000: Done with warnings in 0s 155ms
$ yarn node
Welcome to Node.js v16.17.0.
Type ".help" for more information.
> import('chalk')
Promise {
  <pending>,
  [Symbol(async_id_symbol)]: 157,
  [Symbol(trigger_async_id_symbol)]: 11
}
> Uncaught:
Error: chalk tried to access #ansi-styles, but it isn't declared in its dependencies; this makes the require call ambiguous and unsound.

Required package: #ansi-styles (via "#ansi-styles/package.json")
Required by: chalk@npm:5.0.1 (via /home/ubuntu/chalk-err/.yarn/cache/chalk-npm-5.0.1-6afcb94227-7b45300372.zip/node_modules/chalk/source/index.js)

    at makeError (/home/ubuntu/chalk-err/.pnp.cjs:8466:34)
    at resolveToUnqualified (/home/ubuntu/chalk-err/.pnp.cjs:9385:21)
    at Object.resolveToUnqualified (/home/ubuntu/chalk-err/.pnp.cjs:9529:26)
    at resolve$1 (file:///home/ubuntu/chalk-err/.pnp.loader.mjs:224:31)
    at nextResolve (node:internal/modules/esm/loader:165:28)
    at ESMLoader.resolve (node:internal/modules/esm/loader:844:30)
    at ESMLoader.getModuleJob (node:internal/modules/esm/loader:431:18)
> 

[dobesv]

chalk issue: https://github.com/chalk/chalk/issues/531