Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Resolution errors may happen in server components with packages whose exports field only includes ES module import #42534

Closed
1 task done
joulev opened this issue Nov 6, 2022 · 8 comments · Fixed by #42325 or #42767
Assignees
Labels
area: app App directory (appDir: true)

Comments

@joulev
Copy link
Contributor

joulev commented Nov 6, 2022

Verify canary release

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

Provide environment information

Operating System:
  Platform: darwin
  Arch: x64
  Version: Darwin Kernel Version 22.1.0: Sun Oct  9 20:14:54 PDT 2022; root:xnu-8792.41.9~2/RELEASE_X86_64
Binaries:
  Node: 18.12.0
  npm: 8.19.2
  Yarn: 1.22.19
  pnpm: 7.14.2
Relevant packages:
  next: 13.0.3-canary.0
  eslint-config-next: N/A
  react: 18.2.0
  react-dom: 18.2.0

What browser are you using? (if relevant)

No response

How are you deploying your application? (if relevant)

No response

Describe the Bug

In some ES module packages, the exports field in package.json only includes one import field. This causes some resolution errors when imported to server components. However, getStaticProps and other data-fetching functions in pages directory still works fine.

Since it's quite vague to me, I think I will continue with the example. Clone the repo linked below.

The path /test (in pages directory, with getStaticProps) works as intended. Meanwhile, / (RSC in app directory) doesn't, with a confusing error message:

Module not found: Package path . is not exported from package /path/to/node_modules/periscopic
(see exports field in /path/to/node_modules/periscopic/package.json)

That is (apparently) because periscopic's exports field is like this

"exports": {
  "import": "./src/index.js"
}

After modifying this exports manually, in periscopic and 2 other similar modules (is-reference and estree-walker),

- "exports": {
-  "import": "./src/index.js"
- },
+ "exports": "./src/index.js",

then / works as intended.

Ref: https://github.com/orgs/mdx-js/discussions/2168

Expected Behavior

/ should not crash and gives the same output as /test in the linked reproduction repository.

Link to reproduction

https://github.com/joulev/debug/tree/nextjs-42534

To Reproduce

Mentioned in the "Describe the Bug" section.

  • Clone the repository
  • npm install
  • npm run dev
  • Open /: crash
  • Open /test: works normally
@joulev joulev added the bug Issue was opened via the bug report template. label Nov 6, 2022
@timneutkens timneutkens added the area: app App directory (appDir: true) label Nov 6, 2022
@balazsorban44 balazsorban44 added kind: bug and removed bug Issue was opened via the bug report template. labels Nov 7, 2022
@shuding shuding removed their assignment Nov 8, 2022
@kodiakhq kodiakhq bot closed this as completed in #42325 Nov 10, 2022
kodiakhq bot pushed a commit that referenced this issue Nov 10, 2022
Fixes #42534

* Use eager `import()` to load page/layout to avoid esm module resolution error, eager is to make sure all the sub resources like css are also included
* Fix layer detection, should use `module.layer` directly since `module.resourceResolveData` is not alway presented. It lost when switching from `require()` to `import()` for page/layout component

## Bug

- [x] Related issues linked using `fixes #number`
- [x] Integration tests added
- [ ] Errors have a helpful link attached, see `contributing.md`
@huozhi
Copy link
Member

huozhi commented Nov 10, 2022

Hi can you try again with [email protected]? We patched a fix into it 🙏

@joulev
Copy link
Contributor Author

joulev commented Nov 10, 2022

@huozhi Hi, unfortunately it doesn't work for v13.0.3-canary.3 yet :( in the repro repo above I have upgraded to canary.3 as well and it didn't work.

@huozhi huozhi reopened this Nov 10, 2022
@huozhi
Copy link
Member

huozhi commented Nov 10, 2022

Gotcha seems related to another issue, reopened

@huozhi huozhi assigned shuding and huozhi and unassigned huozhi and shuding Nov 10, 2022
@kodiakhq kodiakhq bot closed this as completed in #42767 Nov 11, 2022
kodiakhq bot pushed a commit that referenced this issue Nov 11, 2022
)

Should be able to resolve `exports.import` condition for esm packages only when import them in server components

Fixes: #42534

## Bug

- [x] Related issues linked using `fixes #number`
- [x] Integration tests added
- [ ] Errors have a helpful link attached, see `contributing.md`
@joulev
Copy link
Contributor Author

joulev commented Nov 11, 2022

It has been fixed now, thanks! 🚀

@huozhi
Copy link
Member

huozhi commented Nov 11, 2022

@schickling Can you try [email protected] to see if it works for you with the issue you mentioned in #41865 (comment)? I tried your reproduction it seems resolved the issue for me

@schickling
Copy link
Contributor

Works 🙌

@l4b4r4b4b4
Copy link

I had a similar issue with [email protected] & [email protected]. It would not fin react-dom/server.js on the server side (API route).
Upgrading to [email protected] resolved the issue for me.

frontend_1   | error - Error: Cannot find module './server.node'
frontend_1   | Require stack:
frontend_1   | - /usr/src/app/node_modules/next/dist/compiled/react-dom/server.js
frontend_1   | - /usr/src/app/node_modules/mjml-react/dist/src/index.js
frontend_1   | - /usr/src/app/.next/server/pages/api/apply/final.js
frontend_1   | - /usr/src/app/node_modules/next/dist/server/next-server.js
frontend_1   | - /usr/src/app/node_modules/next/dist/server/dev/next-dev-server.js
frontend_1   | - /usr/src/app/node_modules/next/dist/server/next.js
frontend_1   | - /usr/src/app/node_modules/next/dist/server/lib/start-server.js
frontend_1   | - /usr/src/app/node_modules/next/dist/cli/next-dev.js
frontend_1   | - /usr/src/app/node_modules/next/dist/lib/commands.js
frontend_1   | - /usr/src/app/node_modules/next/dist/bin/next
frontend_1   |     at Function.Module._resolveFilename (node:internal/modules/cjs/loader:985:15)
frontend_1   |     at Function.mod._resolveFilename (/usr/src/app/node_modules/next/dist/build/webpack/require-hook.js:23:32)
frontend_1   |     at Function.Module._load (node:internal/modules/cjs/loader:833:27)
frontend_1   |     at Module.require (node:internal/modules/cjs/loader:1057:19)
frontend_1   |     at require (node:internal/modules/cjs/helpers:103:18)
frontend_1   |     at Object.<anonymous> (/usr/src/app/node_modules/next/dist/compiled/react-dom/server.js:3:18)
frontend_1   |     at Module._compile (node:internal/modules/cjs/loader:1155:14)
frontend_1   |     at Object.Module._extensions..js (node:internal/modules/cjs/loader:1209:10)
frontend_1   |     at Module.load (node:internal/modules/cjs/loader:1033:32)
frontend_1   |     at Function.Module._load (node:internal/modules/cjs/loader:868:12)
frontend_1   |     at Module.require (node:internal/modules/cjs/loader:1057:19)
frontend_1   |     at require (node:internal/modules/cjs/helpers:103:18)
frontend_1   |     at Object.<anonymous> (/usr/src/app/node_modules/mjml-react/dist/src/index.js:8:38)
frontend_1   |     at Module._compile (node:internal/modules/cjs/loader:1155:14)
frontend_1   |     at Object.Module._extensions..js (node:internal/modules/cjs/loader:1209:10)
frontend_1   |     at Module.load (node:internal/modules/cjs/loader:1033:32)
frontend_1   |     at Function.Module._load (node:internal/modules/cjs/loader:868:12)
frontend_1   |     at Module.require (node:internal/modules/cjs/loader:1057:19)
frontend_1   |     at require (node:internal/modules/cjs/helpers:103:18)
frontend_1   |     at Object.mjml-react (/usr/src/app/.next/server/pages/api/apply/final.js:42:18)
frontend_1   |     at __webpack_require__ (/usr/src/app/.next/server/webpack-api-runtime.js:33:42)
frontend_1   |     at eval (webpack-internal:https:///(api)/./pages/api/apply/final/index.ts:6:68)
frontend_1   |     at Object.(api)/./pages/api/apply/final/index.ts (/usr/src/app/.next/server/pages/api/apply/final.js:142:1)
frontend_1   |     at __webpack_require__ (/usr/src/app/.next/server/webpack-api-runtime.js:33:42)
frontend_1   |     at __webpack_exec__ (/usr/src/app/.next/server/pages/api/apply/final.js:152:39)
frontend_1   |     at /usr/src/app/.next/server/pages/api/apply/final.js:153:28
frontend_1   |     at Object.<anonymous> (/usr/src/app/.next/server/pages/api/apply/final.js:156:3)
frontend_1   |     at Module._compile (node:internal/modules/cjs/loader:1155:14)
frontend_1   |     at Object.Module._extensions..js (node:internal/modules/cjs/loader:1209:10)
frontend_1   |     at Module.load (node:internal/modules/cjs/loader:1033:32)
frontend_1   |     at Function.Module._load (node:internal/modules/cjs/loader:868:12)
frontend_1   |     at Module.require (node:internal/modules/cjs/loader:1057:19)
frontend_1   |     at require (node:internal/modules/cjs/helpers:103:18)
frontend_1   |     at DevServer.runApi (/usr/src/app/node_modules/next/dist/server/next-server.js:467:34)
frontend_1   |     at DevServer.handleApiRequest (/usr/src/app/node_modules/next/dist/server/next-server.js:812:21)
frontend_1   |     at processTicksAndRejections (node:internal/process/task_queues:96:5)
frontend_1   |     at async Object.fn (/usr/src/app/node_modules/next/dist/server/next-server.js:736:37)
frontend_1   |     at async Router.execute (/usr/src/app/node_modules/next/dist/server/router.js:252:36)
frontend_1   |     at async DevServer.run (/usr/src/app/node_modules/next/dist/server/base-server.js:381:29)
frontend_1   |     at async DevServer.run (/usr/src/app/node_modules/next/dist/server/dev/next-dev-server.js:724:20)
frontend_1   |     at async DevServer.handleRequest (/usr/src/app/node_modules/next/dist/server/base-server.js:319:20) {
frontend_1   |   code: 'MODULE_NOT_FOUND',
frontend_1   |   requireStack: [
frontend_1   |     '/usr/src/app/node_modules/next/dist/compiled/react-dom/server.js',
frontend_1   |     '/usr/src/app/node_modules/mjml-react/dist/src/index.js',
frontend_1   |     '/usr/src/app/.next/server/pages/api/apply/final.js',
frontend_1   |     '/usr/src/app/node_modules/next/dist/server/next-server.js',
frontend_1   |     '/usr/src/app/node_modules/next/dist/server/dev/next-dev-server.js',
frontend_1   |     '/usr/src/app/node_modules/next/dist/server/next.js',
frontend_1   |     '/usr/src/app/node_modules/next/dist/server/lib/start-server.js',
frontend_1   |     '/usr/src/app/node_modules/next/dist/cli/next-dev.js',
frontend_1   |     '/usr/src/app/node_modules/next/dist/lib/commands.js',
frontend_1   |     '/usr/src/app/node_modules/next/dist/bin/next'
frontend_1   |   ]
frontend_1   | }

@github-actions
Copy link
Contributor

This closed issue has been automatically locked because it had no new activity for a month. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.

@github-actions github-actions bot locked as resolved and limited conversation to collaborators Dec 16, 2022
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
area: app App directory (appDir: true)
Projects
None yet
7 participants