Help getting chakra-ui work in Nx

[Ali-Hussein-dev]

I started to use Nx a few days ago with Nextjs, but when I try to render Chakra-UI provider, the app crashed with an error msg: " JS stack trace Reached heap limit Allocation failed - JavaScript heap out of memory ...."

try to solve but does not work

I tried to prefix my command like this NODE_OPTIONS=--max_old_space_size=4096 npx nx serve my-app-name
but I got same issue.

I installed only chakra & framer-motion since emotion is already a dep, but also did not work.

reproduce

fork the repo
option 1 install chakra without emotion
npm i @chakra-ui/react framer-motion@^4
option 2 with mention as mentioned in chakra doc
npm i @chakra-ui/react @emotion/react@^11 @emotion/styled@^11 framer-motion@^4

wrap the CustomApp with chakra-provider as below

// _app.tsx
import { AppProps } from 'next/app';
import './styles.css';
import { ChakraProvider } from '@chakra-ui/react';

function CustomApp({ Component, pageProps }: AppProps) {
  return (
      <ChakraProvider>
        <div>{<Component {...pageProps} />}</div>
      </ChakraProvider>
  );
}

any help is really appreciated.