next.js: Using `use` in a Server Component freezes

Verify canary release

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

Provide environment information

---->npx --no-install next info

Operating System:
  Platform: darwin
  Arch: x64
  Version: Darwin Kernel Version 21.6.0: Mon Aug 22 20:17:10 PDT 2022; root:xnu-8020.140.49~2/RELEASE_X86_64
Binaries:
  Node: 16.11.1
  npm: 8.18.0
  Yarn: 1.22.17
  pnpm: N/A
Relevant packages:
  next: 13.0.2
  eslint-config-next: 13.0.0
  react: 18.2.0
  react-dom: 18.2.0

What browser are you using? (if relevant)

Chrome

How are you deploying your application? (if relevant)

n/a

Describe the Bug

I have a pretty rudimentary RSC demo coded up here:

https://github.com/arackaf/next-13-data-fetching-blog-post/blob/feature/use-bug-repro/app/Todos.tsx

When I unwrap the promise in the component using the data using use then Node freezes up. I see about 15+ Node tasks in activity monitor, with one of them at about 150%. Using await works fine.

Eventually, after killing the Next watch, I get this

<— Last few GCs —>

[5793:0x7f8b54a00000] 256154 ms: Mark-sweep 4018.6 (4130.7) -> 4003.6 (4126.9) MB, 5916.0 / 0.8 ms (average mu = 0.093, current mu = 0.015) allocation failure scavenge might not succeed [5793:0x7f8b54a00000] 256564 ms: Scavenge 4019.9 (4127.2) -> 4005.8 (4127.2) MB, 359.2 / 0.5 ms (average mu = 0.093, current mu = 0.015) allocation failure

<— JS stacktrace —>

FATAL ERROR: Ineffective mark-compacts near heap limit Allocation failed - JavaScript heap out of memory 1: 0x101978545 node::Abort() (.cold.1) [/usr/local/Cellar/nvm/0.38.0/versions/node/v16.11.1/bin/node] 2: 0x100679a49 node::Abort() [/usr/local/Cellar/nvm/0.38.0/versions/node/v16.11.1/bin/node] 3: 0x100679bbf node::OnFatalError(char const*, char const*) [/usr/local/Cellar/nvm/0.38.0/versions/node/v16.11.1/bin/node] 4: 0x1007f9387 v8::Utils::ReportOOMFailure(v8::internal::Isolate*, char const*, bool) [/usr/local/Cellar/nvm/0.38.0/versions/node/v16.11.1/bin/node] 5: 0x1007f9323 v8::internal::V8::FatalProcessOutOfMemory(v8::internal::Isolate*, char const*, bool) [/usr/local/Cellar/nvm/0.38.0/versions/node/v16.11.1/bin/node] 6: 0x10099aa35 v8::internal::Heap::FatalProcessOutOfMemory(char const*) [/usr/local/Cellar/nvm/0.38.0/versions/node/v16.11.1/bin/node] 7: 0x10099ea7d v8::internal::Heap::RecomputeLimits(v8::internal::GarbageCollector) [/usr/local/Cellar/nvm/0.38.0/versions/node/v16.11.1/bin/node] 8: 0x10099b35d v8::internal::Heap::PerformGarbageCollection(v8::internal::GarbageCollector, v8::GCCallbackFlags) [/usr/local/Cellar/nvm/0.38.0/versions/node/v16.11.1/bin/node] 9: 0x10099887d v8::internal::Heap::CollectGarbage(v8::internal::AllocationSpace, v8::internal::GarbageCollectionReason, v8::GCCallbackFlags) [/usr/local/Cellar/nvm/0.38.0/versions/node/v16.11.1/bin/node] 10: 0x1009a5bb0 v8::internal::Heap::AllocateRawWithLightRetrySlowPath(int, v8::internal::AllocationType, v8::internal::AllocationOrigin, v8::internal::AllocationAlignment) [/usr/local/Cellar/nvm/0.38.0/versions/node/v16.11.1/bin/node] 11: 0x1009a5c31 v8::internal::Heap::AllocateRawWithRetryOrFailSlowPath(int, v8::internal::AllocationType, v8::internal::AllocationOrigin, v8::internal::AllocationAlignment) [/usr/local/Cellar/nvm/0.38.0/versions/node/v16.11.1/bin/node] 12: 0x100972d87 v8::internal::Factory::NewFillerObject(int, bool, v8::internal::AllocationType, v8::internal::AllocationOrigin) [/usr/local/Cellar/nvm/0.38.0/versions/node/v16.11.1/bin/node] 13: 0x100d2855e v8::internal::Runtime_AllocateInYoungGeneration(int, unsigned long*, v8::internal::Isolate*) [/usr/local/Cellar/nvm/0.38.0/versions/node/v16.11.1/bin/node] 14: 0x1010d1e99 Builtins_CEntry_Return1_DontSaveFPRegs_ArgvOnStack_NoBuiltinExit [/usr/local/Cellar/nvm/0.38.0/versions/node/v16.11.1/bin/node]

Expected Behavior

Use should work the same as await

Link to reproduction

https://github.com/arackaf/next-13-data-fetching-blog-post/blob/feature/use-bug-repro/app/Todos.tsx

To Reproduce

Clone that repo at that branch, and run. Swap the use calls out for the commented out await calls (after clearing the rogue Node processes) to see it work.

About this issue

  • Original URL
  • State: open
  • Created 2 years ago
  • Reactions: 2
  • Comments: 17 (6 by maintainers)

Most upvoted comments

Hi @KSubedi regarding use() in client components, you can read why you get infinite loops here: https://github.com/vercel/next.js/issues/42180#issuecomment-1303553483 and you can read this for the fix: https://github.com/vercel/next.js/issues/42180#issuecomment-1303676756

EDIT: also make sure you are on v13.0.2 or higher

From beta docs I remember use is reserved for client only. So maybe you have to add ‘use client’ on top. However in my experience it doesn’t work: it goes in infinite loop