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

joulev · 2022-11-06T13:12:58Z

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

The text was updated successfully, but these errors were encountered:

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 · 2022-11-10T12:49:49Z

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

joulev · 2022-11-10T12:56:51Z

@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 · 2022-11-10T13:37:59Z

Gotcha seems related to another issue, reopened

) 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 · 2022-11-11T04:44:58Z

It has been fixed now, thanks! 🚀

huozhi · 2022-11-11T14:49:54Z

@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 · 2022-11-11T14:50:30Z

Works 🙌

l4b4r4b4b4 · 2022-11-16T03:43:47Z

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:///(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 · 2022-12-16T12:01:23Z

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.

joulev added the bug Issue was opened via the bug report template. label Nov 6, 2022

timneutkens added the area: app App directory (appDir: true) label Nov 6, 2022

timneutkens assigned shuding and huozhi Nov 7, 2022

balazsorban44 added kind: bug and removed bug Issue was opened via the bug report template. labels Nov 7, 2022

shuding removed their assignment Nov 8, 2022

huozhi mentioned this issue Nov 10, 2022

Use import to load page and layout #42325

Merged

3 tasks

kodiakhq bot closed this as completed in #42325 Nov 10, 2022

huozhi reopened this Nov 10, 2022

huozhi assigned shuding and huozhi and unassigned huozhi and shuding Nov 10, 2022

This was referenced Nov 10, 2022

Module not found: ESM packages (/path/to/app/page.js) need to be imported. #41865

Closed

Fix resolving for esm package with only exports.import condition #42767

Merged

kodiakhq bot closed this as completed in #42767 Nov 11, 2022

github-actions bot locked as resolved and limited conversation to collaborators Dec 16, 2022

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

joulev commented Nov 6, 2022 •

edited

Loading

huozhi commented Nov 10, 2022

joulev commented Nov 10, 2022

huozhi commented Nov 10, 2022

joulev commented Nov 11, 2022

huozhi commented Nov 11, 2022

schickling commented Nov 11, 2022

l4b4r4b4b4 commented Nov 16, 2022

github-actions bot commented Dec 16, 2022

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

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

Comments

joulev commented Nov 6, 2022 • edited Loading

Verify canary release

Provide environment information

What browser are you using? (if relevant)

How are you deploying your application? (if relevant)

Describe the Bug

Expected Behavior

Link to reproduction

To Reproduce

huozhi commented Nov 10, 2022

joulev commented Nov 10, 2022

huozhi commented Nov 10, 2022

joulev commented Nov 11, 2022

huozhi commented Nov 11, 2022

schickling commented Nov 11, 2022

l4b4r4b4b4 commented Nov 16, 2022

github-actions bot commented Dec 16, 2022

joulev commented Nov 6, 2022 •

edited

Loading