next.js
next.js copied to clipboard
NextJS module resolution with package exports and transient deps
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: