title: Object.fromEntries is not a function error when using chakra-ui and next.js
body: <p>I created a next.js app using Vercel and then installed chakra-ui using the following command line:</p>
  <p>npm i @chakra-ui/react @emotion/react@^11 @emotion/styled@^11 framer-motion@^4</p>
  <p>It resulted in the following error:</p>
  <pre><code>TypeError: Object.fromEntries is not a function
      at inner (/Users/vaibhavverma9/Desktop/tcofrontend/node_modules/@chakra-ui/utils/dist/cjs/walk-object.js:21:21)
      at /Users/vaibhavverma9/Desktop/tcofrontend/node_modules/@chakra-ui/utils/dist/cjs/walk-object.js:24:22
      at Array.map (&lt;anonymous&gt;)
      at inner (/Users/vaibhavverma9/Desktop/tcofrontend/node_modules/@chakra-ui/utils/dist/cjs/walk-object.js:21:55)
      at /Users/vaibhavverma9/Desktop/tcofrontend/node_modules/@chakra-ui/utils/dist/cjs/walk-object.js:24:22
      at Array.map (&lt;anonymous&gt;)
      at inner (/Users/vaibhavverma9/Desktop/tcofrontend/node_modules/@chakra-ui/utils/dist/cjs/walk-object.js:21:55)
      at walkObject (/Users/vaibhavverma9/Desktop/tcofrontend/node_modules/@chakra-ui/utils/dist/cjs/walk-object.js:31:10)
      at createThemeVars (/Users/vaibhavverma9/Desktop/tcofrontend/node_modules/@chakra-ui/styled-system/dist/cjs/create-theme-vars/create-theme-vars.js:19:25)
      at toCSSVar (/Users/vaibhavverma9/Desktop/tcofrontend/node_modules/@chakra-ui/styled-system/dist/cjs/create-theme-vars/to-css-var.js:28:64)
  </code></pre>
  <p>I tried tinkering with node modules... these are my dependencies:</p>
  <pre><code>&quot;dependencies&quot;: {
      &quot;@chakra-ui/react&quot;: &quot;^1.6.1&quot;,
      &quot;@emotion/react&quot;: &quot;^11.4.0&quot;,
      &quot;@emotion/styled&quot;: &quot;^11.3.0&quot;,
      &quot;@types/react&quot;: &quot;^17.0.5&quot;,
      &quot;framer-motion&quot;: &quot;^4.1.16&quot;,
      &quot;next&quot;: &quot;10.2.0&quot;,
      &quot;react&quot;: &quot;17.0.2&quot;,
      &quot;react-dom&quot;: &quot;17.0.2&quot;,
      &quot;typescript&quot;: &quot;^4.2.4&quot;
    }
  </code></pre>
  <p>This is my pages/_app.tsx file:</p>
  <pre><code>import '../styles/globals.css'
  import { ChakraProvider } from &quot;@chakra-ui/react&quot;
  
  function MyApp({ Component, pageProps }) {
    return (
      &lt;ChakraProvider&gt;
        &lt;Component {...pageProps} /&gt;
      &lt;/ChakraProvider&gt;
    )
  }
  
  export default MyApp
  </code></pre>
  <p>And I left the index.tsx as default:</p>
  <pre><code>import Head from 'next/head'
  import Image from 'next/image'
  import styles from '../styles/Home.module.css'
  
  export default function Home() {
    return (
      &lt;div className={styles.container}&gt;
        &lt;Head&gt;
          &lt;title&gt;Create Next App&lt;/title&gt;
          &lt;meta name=&quot;description&quot; content=&quot;Generated by create next app&quot; /&gt;
          &lt;link rel=&quot;icon&quot; href=&quot;/favicon.ico&quot; /&gt;
        &lt;/Head&gt;
  
        &lt;main className={styles.main}&gt;
          &lt;h1 className={styles.title}&gt;
            Welcome to &lt;a href=&quot;https://nextjs.org&quot;&gt;Next.js!&lt;/a&gt;
          &lt;/h1&gt;
  
          &lt;p className={styles.description}&gt;
            Get started by editing{' '}
            &lt;code className={styles.code}&gt;pages/index.js&lt;/code&gt;
          &lt;/p&gt;
  
          &lt;div className={styles.grid}&gt;
            &lt;a href=&quot;https://nextjs.org/docs&quot; className={styles.card}&gt;
              &lt;h2&gt;Documentation &amp;rarr;&lt;/h2&gt;
              &lt;p&gt;Find in-depth information about Next.js features and API.&lt;/p&gt;
            &lt;/a&gt;
  
            &lt;a href=&quot;https://nextjs.org/learn&quot; className={styles.card}&gt;
              &lt;h2&gt;Learn &amp;rarr;&lt;/h2&gt;
              &lt;p&gt;Learn about Next.js in an interactive course with quizzes!&lt;/p&gt;
            &lt;/a&gt;
  
            &lt;a
              href=&quot;https://github.com/vercel/next.js/tree/master/examples&quot;
              className={styles.card}
            &gt;
              &lt;h2&gt;Examples &amp;rarr;&lt;/h2&gt;
              &lt;p&gt;Discover and deploy boilerplate example Next.js projects.&lt;/p&gt;
            &lt;/a&gt;
  
            &lt;a
              href=&quot;https://vercel.com/new?utm_source=create-next-app&amp;utm_medium=default-template&amp;utm_campaign=create-next-app&quot;
              className={styles.card}
            &gt;
              &lt;h2&gt;Deploy &amp;rarr;&lt;/h2&gt;
              &lt;p&gt;
                Instantly deploy your Next.js site to a public URL with Vercel.
              &lt;/p&gt;
            &lt;/a&gt;
          &lt;/div&gt;
        &lt;/main&gt;
  
        &lt;footer className={styles.footer}&gt;
          &lt;a
            href=&quot;https://vercel.com?utm_source=create-next-app&amp;utm_medium=default-template&amp;utm_campaign=create-next-app&quot;
            target=&quot;_blank&quot;
            rel=&quot;noopener noreferrer&quot;
          &gt;
            Powered by{' '}
            &lt;span className={styles.logo}&gt;
              &lt;Image src=&quot;/vercel.svg&quot; alt=&quot;Vercel Logo&quot; width={72} height={16} /&gt;
            &lt;/span&gt;
          &lt;/a&gt;
        &lt;/footer&gt;
      &lt;/div&gt;
    )
  }
  </code></pre>
  <p>Does anyone know how I can resolve the error?</p>