Object.fromEntries is not a function error when using chakra-ui and next.js

I created a next.js app using Vercel and then installed chakra-ui using the following command line:

npm i @chakra-ui/react @emotion/react@^11 @emotion/styled@^11 framer-motion@^4

It resulted in the following error:

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 (<anonymous>)
    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 (<anonymous>)
    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)

I tried tinkering with node modules... these are my dependencies:

"dependencies": {
    "@chakra-ui/react": "^1.6.1",
    "@emotion/react": "^11.4.0",
    "@emotion/styled": "^11.3.0",
    "@types/react": "^17.0.5",
    "framer-motion": "^4.1.16",
    "next": "10.2.0",
    "react": "17.0.2",
    "react-dom": "17.0.2",
    "typescript": "^4.2.4"
  }

This is my pages/_app.tsx file:

import '../styles/globals.css'
import { ChakraProvider } from "@chakra-ui/react"

function MyApp({ Component, pageProps }) {
  return (
    <ChakraProvider>
      <Component {...pageProps} />
    </ChakraProvider>
  )
}

export default MyApp

And I left the index.tsx as default:

import Head from 'next/head'
import Image from 'next/image'
import styles from '../styles/Home.module.css'

export default function Home() {
  return (
    <div className={styles.container}>
      <Head>
        <title>Create Next App</title>
        <meta name="description" content="Generated by create next app" />
        <link rel="icon" href="/favicon.ico" />
      </Head>

      <main className={styles.main}>
        <h1 className={styles.title}>
          Welcome to <a href="https://nextjs.org">Next.js!</a>
        </h1>

        <p className={styles.description}>
          Get started by editing{' '}
          <code className={styles.code}>pages/index.js</code>
        </p>

        <div className={styles.grid}>
          <a href="https://nextjs.org/docs" className={styles.card}>
            <h2>Documentation &rarr;</h2>
            <p>Find in-depth information about Next.js features and API.</p>
          </a>

          <a href="https://nextjs.org/learn" className={styles.card}>
            <h2>Learn &rarr;</h2>
            <p>Learn about Next.js in an interactive course with quizzes!</p>
          </a>

          <a
            href="https://github.com/vercel/next.js/tree/master/examples"
            className={styles.card}
          >
            <h2>Examples &rarr;</h2>
            <p>Discover and deploy boilerplate example Next.js projects.</p>
          </a>

          <a
            href="https://vercel.com/new?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
            className={styles.card}
          >
            <h2>Deploy &rarr;</h2>
            <p>
              Instantly deploy your Next.js site to a public URL with Vercel.
            </p>
          </a>
        </div>
      </main>

      <footer className={styles.footer}>
        <a
          href="https://vercel.com?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
          target="_blank"
          rel="noopener noreferrer"
        >
          Powered by{' '}
          <span className={styles.logo}>
            <Image src="/vercel.svg" alt="Vercel Logo" width={72} height={16} />
          </span>
        </a>
      </footer>
    </div>
  )
}

Does anyone know how I can resolve the error?

Solution 1:

I had to update my node version, which was at v10.17.0. I updated it to v14.17.0!

Solution 2:

Yeah, I had trouble with this case and I solved it by updating the node version from v10 to v14 and It worked smoothly.

You can use the quick command with nvm:

nvm install v14

If it's available:

nvm use 14

Hope you too!

Solution 3:

Check if your Node.js is under version v12.0.0. If it is, then Object.fromEntries() is not supported.

Option #1: Upgrade to a version of Node JS that is above version 12.0.0.

Option #2: Instead of calling Object.fromEntries() use a ponyfill/polyfill like this which is only 6 lines long: https://github.com/feross/fromentries/blob/master/index.js (credits to the original authors)

Object.fromEntries is not a function error when using chakra-ui and next.js

Solution 1:

Solution 2:

Solution 3:

Related

Recent Posts