ESM modules don't work with yarn P'n'P

[reckter]

💥 Regression Report

Prior to version 21.5.0 yarn berry's PnP did work just as expected in a nextjs project.
It seems that #1681 somehow confuses the yarn loader, as it always says:

error - Error [ERR_MODULE_NOT_FOUND]: Cannot find package 'i18next' imported from /Users/reckter/<project>/.next/server/pages/_app.js
Did you mean to import i18next-npm-21.5.0-0d9872eb61-3c2edce641.zip/node_modules/i18next/dist/cjs/i18next.js?
Error [ERR_MODULE_NOT_FOUND]: Cannot find package 'i18next' imported from /Users/reckter/<project>/.next/server/pages/_app.js
Did you mean to import i18next-npm-21.5.0-0d9872eb61-3c2edce641.zip/node_modules/i18next/dist/cjs/i18next.js?
    at new NodeError (node:internal/errors:371:5)
    at packageResolve (node:internal/modules/esm/resolve:930:9)
    at moduleResolve (node:internal/modules/esm/resolve:976:18)
    at defaultResolve (node:internal/modules/esm/resolve:1078:11)
    at ESMLoader.resolve (node:internal/modules/esm/loader:530:30)
    at ESMLoader.getModuleJob (node:internal/modules/esm/loader:251:18)
    at ESMLoader.import (node:internal/modules/esm/loader:332:22)
    at importModuleDynamically (node:internal/modules/cjs/loader:1042:29)
    at importModuleDynamicallyWrapper (node:internal/vm/module:437:21)
    at importModuleDynamically (node:vm:381:46) {
  code: 'ERR_MODULE_NOT_FOUND',
  page: '/'
}

(I've tried the latest version as well, no luck)

Last working version

Worked up to version: 21.4.2

Stopped working in version: 21.5.0

To Reproduce

Steps to reproduce the behavior:

use i18next in a yarn PnP backed nextjs project.

I also made an example repository here: https://github.com/opencreek/i18next-yarn-bug
It's based on the nextjs typescript starter, it should be a (fairly) minimal example of the behaviour

Expected behavior

No Importing errors, while building / running the dev server

Your Environment

• runtime version: node v16
• i18next version: >=21.5.0
• os: Mac M1
• nextjs: 12.1.20
• yarn: 3.1.1 with PnP enabled

[adrai]

Sorry, never used yarn with a dedicated yarnPath.

It seems like the problem is this package.json file: dist/esm/package.json in the npm package

As soon as this file does not exist, it seems to work. (I tested by removing it in the zip file here: .yarn/cache/*.zip)

Based on the error message it seems someone (yarn, webpack or whoever) is first looking on the esm dist and afterwards at the cjs dist... the i18next package.json seems to define it correctly.

If you know how to fix this without breaking other stuff like: #1681
fyi: https://www.sensedeep.com/blog/posts/2021/how-to-create-single-source-npm-module.html

//cc: @perrin4869

[perrin4869]

Yeah I also don't have much yarn experience...
I guess one possible solution is to rename i18next/dist/esm/index.js -> index.mjs? Or add type: module to the root package.json and instead rename dist/cjs/i18next.js -> i18next.cjs?

[adrai]

I tested a couple of those things... no luck.

But honestly it works with npm (or when node_modules folder exists), so I think you should try to open an issue at the yarn repo 🤷‍♂️

[perrin4869]

well, adding type: module and renaming i18next.cjs would require a lot of refactoring to get working, but I think it would solve the issue here...
But I'd also be interested in hearing what the yarn folks got to say about the problem here

[adrai]

well, adding type: module and renaming i18next.cjs would require a lot of refactoring to get working, but I think it would solve the issue here...

But I'd also be interested in hearing what the yarn folks got to say about the problem here

fyi: looks like i18next-fetch-backend is type: module but also not working in the above example

[perrin4869]

Ah yeah, I was using package.json files there to set the module type. I pushed a patched 4.1.1 version of i18next-fetch-backend, I think that will solve this problem 😅

[adrai]

Still curious why this works with node_modules, but not when using yarnPath (https://github.com/opencreek/i18next-yarn-bug/blob/main/.yarnrc.yml)
@arcanis any advice?

[reckter]

@perrin4869 Seems like 4.1.1 did not solve the issue (at least in my test-repository) :/

@adrai the yarnPath "just" sets the version of the yarn binary to use (in this case 3.1.1).
the important difference to a simple "vanilla" node_modules setup is the (in this case missing, because default) nodeLinker field, which defaults to pnp in yarn version 3.x.
(and that is what causes these issues)

[perrin4869]

well I kinda assumed the problem was the empty package.json files, but if this is the case then I have no idea... seems like a yarn problem indeed

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.