App craches when using in Next.js

[victorfernandesraton]

Description

When i start app using chakra in next.js latest version , compile as crashed

Link to Reproduction

https://codesandbox.io/s/eloquent-shirley-ej517?file=/pages/_app.js

Steps to reproduce

1. Go to _app.js file
2. Uncomment lines 3, 7 and 9

Chakra UI Version

1.6.4

Browser

Brave Versão 1.31.87 Chromium: 95.0.4638.54 (Versão oficial) 64 bits

Operating System

• macOS
• Windows
• Linux

Additional Information

Using node 16 lts and i see this error in terminal

<--- Last few GCs --->

[58933:0x4b98030]    28058 ms: Scavenge (reduce) 2033.0 (2069.2) -> 2032.4 (2070.7) MB, 7.4 / 0.0 ms  (average mu = 0.434, current mu = 0.198) allocation failure 
[58933:0x4b98030]    29842 ms: Mark-sweep (reduce) 2048.9 (2085.6) -> 2045.9 (2082.7) MB, 1658.4 / 0.0 ms  (+ 1506.5 ms in 308 steps since start of marking, biggest step 9.6 ms, walltime since start of marking 3288 ms) (average mu = 0.290, current mu = 0.

<--- JS stacktrace --->

FATAL ERROR: Reached heap limit Allocation failed - JavaScript heap out of memory
 1: 0xb02ec0 node::Abort() [node]
 2: 0xa181fb node::FatalError(char const*, char const*) [node]
 3: 0xced88e v8::Utils::ReportOOMFailure(v8::internal::Isolate*, char const*, bool) [node]
 4: 0xcedc07 v8::internal::V8::FatalProcessOutOfMemory(v8::internal::Isolate*, char const*, bool) [node]
 5: 0xea5ea5  [node]
 6: 0xeb557d v8::internal::Heap::CollectGarbage(v8::internal::AllocationSpace, v8::internal::GarbageCollectionReason, v8::GCCallbackFlags) [node]
 7: 0xeb827e v8::internal::Heap::AllocateRawWithRetryOrFailSlowPath(int, v8::internal::AllocationType, v8::internal::AllocationOrigin, v8::internal::AllocationAlignment) [node]
 8: 0xe796aa v8::internal::Factory::NewFillerObject(int, bool, v8::internal::AllocationType, v8::internal::AllocationOrigin) [node]
 9: 0x11f2e86 v8::internal::Runtime_AllocateInYoungGeneration(int, unsigned long*, v8::internal::Isolate*) [node]
10: 0x15e7879  [node]
Aborted (core dumped)

[segunadebayo]

Hi @victorfernandesraton,

You have the wrong dependencies installed.

• chakra-ui instead of @chakra-ui/react
• Remove the emotion dependency
• Add framer-motion dependency

That's what you need to do

[kohkimakimoto]

I have the similar issue that is caused with the following dependencies:

  "dependencies": {
    "@chakra-ui/react": "^1.6.10",
    "@emotion/react": "^11",
    "@emotion/styled": "^11",
    "framer-motion": "^4",
    "next": "latest",
    "react": "^17.0.2",
    "react-dom": "^17.0.2"
  },

For more detail. Please see my codesandox: https://codesandbox.io/s/sweet-satoshi-dd8zn

I got the error like the following:

<--- Last few GCs --->

[19499:0x7fc40d900000]    56288 ms: Mark-sweep 4062.2 (4139.9) -> 4057.7 (4137.7) MB, 6296.7 / 0.0 ms  (average mu = 0.335, current mu = 0.013) allocation failure scavenge might not succeed
[19499:0x7fc40d900000]    63676 ms: Mark-sweep 4065.5 (4137.7) -> 4063.4 (4164.7) MB, 7375.9 / 0.0 ms  (average mu = 0.181, current mu = 0.002) allocation failure scavenge might not succeed


<--- JS stacktrace --->

FATAL ERROR: Reached heap limit Allocation failed - JavaScript heap out of memory
 1: 0x1017d4bb1 node::Abort() [/usr/local/Cellar/node/17.0.1/bin/node]
 2: 0x1017d4d33 node::OnFatalError(char const*, char const*) [/usr/local/Cellar/node/17.0.1/bin/node]
 3: 0x101911993 v8::Utils::ReportOOMFailure(v8::internal::Isolate*, char const*, bool) [/usr/local/Cellar/node/17.0.1/bin/node]
 4: 0x10191193d v8::internal::V8::FatalProcessOutOfMemory(v8::internal::Isolate*, char const*, bool) [/usr/local/Cellar/node/17.0.1/bin/node]
 5: 0x101a3b2e3 v8::internal::Heap::FatalProcessOutOfMemory(char const*) [/usr/local/Cellar/node/17.0.1/bin/node]
 6: 0x101a3a335 v8::internal::Heap::CollectGarbage(v8::internal::AllocationSpace, v8::internal::GarbageCollectionReason, v8::GCCallbackFlags) [/usr/local/Cellar/node/17.0.1/bin/node]
 7: 0x101a42319 v8::internal::Heap::AllocateRawWithLightRetrySlowPath(int, v8::internal::AllocationType, v8::internal::AllocationOrigin, v8::internal::AllocationAlignment) [/usr/local/Cellar/node/17.0.1/bin/node]
 8: 0x101a4237a v8::internal::Heap::AllocateRawWithRetryOrFailSlowPath(int, v8::internal::AllocationType, v8::internal::AllocationOrigin, v8::internal::AllocationAlignment) [/usr/local/Cellar/node/17.0.1/bin/node]
 9: 0x101a201ef v8::internal::Factory::NewFillerObject(int, bool, v8::internal::AllocationType, v8::internal::AllocationOrigin) [/usr/local/Cellar/node/17.0.1/bin/node]
10: 0x101cbd411 v8::internal::Runtime_AllocateInYoungGeneration(int, unsigned long*, v8::internal::Isolate*) [/usr/local/Cellar/node/17.0.1/bin/node]
11: 0x101f5a579 Builtins_CEntry_Return1_DontSaveFPRegs_ArgvOnStack_NoBuiltinExit [/usr/local/Cellar/node/17.0.1/bin/node]

[kohkimakimoto]

This is next.js issue: vercel/next.js#30330 and it works well by this work around: vercel/next.js#30330 (comment)