Chakra-UI with NextJS is not working immediately after importing

Question

I am learning NextJS and Chakra-UI. when I import chakra-ui after installation, I am gettinng the below error in the page. Can you please help?

Server Error
TypeError: Cannot read properties of undefined (reading 'toLowerCase')

This error happened while generating the page. Any console logs will be displayed in the terminal window.
Call Stack
userAgentContains
file:///Users/dhineshbabumuthuraj/Documents/Dhineshbabu/learning/JavaScript/nextjs-apps/sample-nextjs-app1/node_modules/framer-motion/dist/es/projection/node/create-projection-node.mjs (1470:25)
<unknown>
file:///Users/dhineshbabumuthuraj/Documents/Dhineshbabu/learning/JavaScript/nextjs-apps/sample-nextjs-app1/node_modules/framer-motion/dist/es/projection/node/create-projection-node.mjs (1476:20)
ModuleJob.run
node:internal/modules/esm/module_job (218:25)
async ModuleLoader.import
node:internal/modules/esm/loader (329:24)
async importModuleDynamicallyWrapper
node:internal/vm/module (430:15)

import Layout from '../components/layout/layout';
import '../styles/globals.css';
import { ChakraProvider } from '@chakra-ui/react';

export default function App({ Component, pageProps }) {
  return (
    
    <Layout>
      <Component {...pageProps} />;
    </Layout>
  );
}

This is my _app.js file, I have not used the component anywhere in the script. But the page is giving this error immediately after import.

Thanks, DHinesh

Answer 1

The error is caused by Framer motion in Node 21 environment. Please refer to this GitHub issue for more details. https://github.com/framer/motion/issues/2371

You can downgrade to older node version and wait for the new version release of framer motion.