NextJS module resolution with package exports and transient deps

[frehner]

Verify canary release

• [X] I verified that the issue exists in the latest Next.js canary release

Provide environment information

Operating System:
      Platform: darwin
      Arch: arm64
      Version: Darwin Kernel Version 21.6.0: Mon Aug 22 20:19:52 PDT 2022; root:xnu-8020.140.49~2/RELEASE_ARM64_T6000
    Binaries:
      Node: 18.8.0
      npm: 8.18.0
      Yarn: 1.22.19
      pnpm: 7.11.0
    Relevant packages:
      next: 13.0.3-canary.1
      eslint-config-next: 13.0.2
      react: 18.2.0
      react-dom: 18.2.0

What browser are you using? (if relevant)

Version 107.0.5304.87 (Official Build) (arm64)

How are you deploying your application? (if relevant)

n/a

Describe the Bug

I’m building a React-based library (called Hydrogen-UI). My library is using package exports in addition to the standard “main” / “module” fields in package.json. (My library is also compiled to both cjs and esm formats)

https://github.com/Shopify/hydrogen-ui/blob/2022-10/packages/react/package.json

My library internally depends on another library @xstate. I’ve configured my bundler (Vite) to externalize @xstate so that it isn’t included in my library when it’s published to npm.

When I test out my library in NextJS, I get the following error:

Server Error
Error: Directory import '/Users/af/dev/nextjs-playground/node_modules/@xstate/react/fsm' is not supported resolving ES modules imported from /Users/af/dev/nextjs-playground/node_modules/@shopify/hydrogen-react/dist/prod/useCartAPIStateMachine.mjs 

Did you mean to import @xstate/react/lib/fsm.js?

The source code for my library that is causing this error can be found here.

And for reference, the @xstate/react/fsm import appears to resolve to this folder, which is just a simple package.json

Here is a full example of it not working - this is a fairly simple NextJS app with my library.

—

In testing, it seems that if I use that example repo linked above, and I delete the ”exports” field from node_modules/@shopify/hydrogen-react/package.json , the error goes away and the NextJS app works.

So it seems like if my library is using package exports, then that maybe has an effect on the resolution of my library’s dependencies (aka transient dependencies), and it fails to resolve them correctly?

Is this expected, and if so, does that mean that I would have to change either how my library is bundled or would I have to remove package exports from my library’s package.json?

Thanks.

Expected Behavior

A library written with package exports can depend on a library that doesn't have package exports.

Link to reproduction

https://github.com/frehner/nextjs-playground/pull/1

To Reproduce

Clone repo above. Then:

• npm install
• npm run dev

See error: