How to Fix the ‘Object.fromEntries is not a function’ Error in Next.js with Chakra UI

When I spun up a fresh Next.js project and wired in Chakra UI, the very first run crashed with a scary wall of red text:

Error

TypeError: Object.fromEntries is not a function

If you’re staring at the same error, stick with me. I’ll show you the exact code I used, why the bug happens, two quick ways to solve it, and a little practice playground that proves Chakra works once the runtime is sorted. I’ll finish with a short wrap-up so you can get back to building.

My Code

Here’s the unedited scaffold generated by create-next-app. I only wrapped the pages in ChakraProvider.

// pages/_app.tsx
import '../styles/globals.css';
import { ChakraProvider } from '@chakra-ui/react';

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

export default MyApp;

// pages/index.tsx
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}>
      {/* …create-next-app default markup… */}
    </div>
  );
}

I hit ⌘ + R, and boom the crash.

The Error Pops Up

Object.fromEntries() was added in Node 12. If the server (or Vercel build) is running Node 10 or below, that method doesn’t exist. Chakra UI calls it while turning the theme object into CSS variables, so the whole render cycle fails.

In short: old Node version ⇒ missing built-in ⇒ runtime crash.

Explain Code

Tip: After switching Node, stop and restart every dev or build process so the change takes effect.

Pin a Safe Node Version in package.json

Future me (or a teammate) might forget which Node release the app needs. This tiny block prevents that:

{
  "engines": {
    "node": ">=14.0"
  }
}

Most CI services and Vercel will pick the right runtime automatically when they see this field.

Practice Playground

Once Node is sorted I like to double-check that Chakra actually works. I built a quick test that adds a brand colour and a light/dark switch.

Create a Theme

// theme.ts
import { extendTheme, ThemeConfig } from '@chakra-ui/react';

const config: ThemeConfig = {
  initialColorMode: 'light',
  useSystemColorMode: false,
};

export const theme = extendTheme({
  config,
  colors: {
    brand: {
      50:  '#e3f9ff',
      100: '#c2e9ff',
      500: '#219bfd',
      700: '#0766c3',
    },
  },
});

Wire It Up

// pages/_app.tsx
import { ChakraProvider, ColorModeScript } from '@chakra-ui/react';
import { theme } from '../theme';
import '../styles/globals.css';

function MyApp({ Component, pageProps }) {
  return (
    <ChakraProvider theme={theme}>
      <ColorModeScript initialColorMode={theme.config.initialColorMode} />
      <Component {...pageProps} />
    </ChakraProvider>
  );
}

export default MyApp;

Test the Toggle

// pages/index.tsx
import { Heading, Text, Button, Stack, useColorMode } from '@chakra-ui/react';

export default function Home() {
  const { toggleColorMode } = useColorMode();

  return (
    <Stack align="center" spacing={6} mt={24}>
      <Heading size="lg">Chakra UI + Next.js works!</Heading>
      <Text>Click below to switch colour modes.</Text>
      <Button colorScheme="brand" onClick={toggleColorMode}>
        Toggle Light / Dark
      </Button>
    </Stack>
  );
}

Now fire up npm run dev. If you can flip between light and dark without errors, the environment is healthy.

What I Practised

• Custom theme — I added brand.500 for my main accent.
• Colour-mode script — Stops that nasty flash during hydration.
• Hooks — useColorMode makes the toggle one-liner easy.

Feel free to swap the Button for an IconButton, add @chakra-ui/icons, or bring in Framer Motion to animate the whole stack. The runtime is ready.

Final Thought

The “Object.fromEntries is not a function” bug looks huge, but it’s really just a sign that the Node version is too old. Upgrade (or polyfill), restart, and Chakra UI falls right into place. Once the basics are stable you’re free to invent theme tokens, dark mode, fancy motion, whatever your project needs.