Next 12.0.2 - Cannot find package x with yarn berry

[JacobSoderblom]

What version of Next.js are you using?

12.0.2

What version of Node.js are you using?

16.13.0

What browser are you using?

Chrome

What operating system are you using?

macOS

How are you deploying your application?

next start

Describe the Bug

After upgrading to 12.0.2 from 11.x.x we receive errors when nextjs tries to render the pages.

Error [ERR_MODULE_NOT_FOUND]: Cannot find package 'zustand' imported from ~/omnia/frontend/.next/server/pages/_app.js
Did you mean to import zustand-virtual-2486ae7564/0/cache/zustand-npm-3.5.10-ae37f01280-a9bb68c137.zip/node_modules/zustand/index.js?
    at new NodeError (node:internal/errors:371:5)
    at packageResolve (node:internal/modules/esm/resolve:884:9)
    at moduleResolve (node:internal/modules/esm/resolve:929:18)
    at defaultResolve (node:internal/modules/esm/resolve:1044:11)
    at ESMLoader.resolve (node:internal/modules/esm/loader:422:30)
    at ESMLoader.getModuleJob (node:internal/modules/esm/loader:222:40)
    at ESMLoader.import (node:internal/modules/esm/loader:276:22)
    at importModuleDynamically (node:internal/modules/cjs/loader:1041:29)
    at importModuleDynamicallyWrapper (node:internal/vm/module:437:21)
    at importModuleDynamically (node:vm:381:46) {
  code: 'ERR_MODULE_NOT_FOUND'
}

Note that we are using yarn v2 (Berry | 3.0.2) with zero install config.

Expected Behavior

It should be possible to upgrade from 11.x.x to 12.x.x with yarn v2 and zero install config.

To Reproduce

• Create a new nextjs project with yarn v2 and opt-in for zero install config
• Install a package of your choice
• Use the package in _app.(tsx|js) or in any other pages
• Start nextjs in dev mode go to your application
• Check the console where you started your nextjs instance

[kherock]

This a Yarn issue that will be resolved in the next patch release of Yarn 3:

yarnpkg/berry#3687

You can keep your existing stack operating on v12 by disabling esm in your next config:

// next.config.js
module.exports = {
  experimental: { esmExternals: false }
}

[rtritto]

Same issue #30363

This problem is related to ESM loader using SWC compiler and importing an ESM library (it correctly works with Babel compiler).

Currently, it doesn't work with yarn v3.2.0-rc.6 (or v3.1.1) and next.js v12.0.4.

I don't know if we should add pnpEnableEsmLoader: true to yarnrc.yml and/or use this option:

--experimental-loader ./.pnp.loader.mjs

[balazsorban44]

Closing as duplicate of #30363

[balazsorban44]

This issue has been automatically locked due to no recent activity. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.