How to resolve error when using Chakra UI with Nextjs - next.js

Question

I am not able to use the latest version of Chakra UI with Nextjs.
There is some problem with CommonJS modules and it is preventing execution.
Below you will see the error being returned:
SyntaxError: Named export 'chakra' not found. The requested module '#chakra-ui/system' is a CommonJS module, which may not support all module.exports as named exports.
CommonJS modules can always be imported via the default export, for example using:
import pkg from '#chakra-ui/system';
package.json:
{
"name": "frontend-admin",
"version": "0.1.0",
"private": true,
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start",
"lint": "next lint",
"test": "jest"
},
"dependencies": {
"#chakra-ui/react": "^2.4.9",
"#emotion/react": "^11.10.5",
"#emotion/styled": "^11.10.5",
"#hookform/resolvers": "^2.9.0",
"#testing-library/user-event": "^14.4.3",
"axios": "^0.27.2",
"axios-mock-adapter": "^1.21.2",
"broadcast-channel": "^4.18.1",
"chakra-ui-simple-autocomplete": "^2.2.0",
"date-fns": "^2.28.0",
"framer-motion": "^8.5.0",
"jwt-decode": "^3.1.2",
"next": "12.1.6",
"nookies": "^2.5.2",
"react": "^18.2.0",
"react-apexcharts": "^1.4.0",
"react-dom": "^18.2.0",
"react-hook-form": "^7.31.3",
"react-icons": "^4.6.0",
"react-query": "^3.39.1",
"twilio": "^3.78.0",
"yup": "^0.32.11"
},
"devDependencies": {
"#babel/core": "^7.19.1",
"#babel/preset-env": "^7.19.1",
"#babel/preset-typescript": "^7.18.6",
"#faker-js/faker": "^7.2.0",
"#testing-library/jest-dom": "^5.16.5",
"#testing-library/react": "^12.1.2",
"#types/jest": "^29.0.3",
"#types/node": "^18.11.18",
"#types/react": "^18.0.10",
"#types/react-dom": "18.0.6",
"#typescript-eslint/eslint-plugin": "^5.37.0",
"#typescript-eslint/parser": "^5.37.0",
"babel-jest": "^29.0.3",
"eslint": "8.23.0",
"eslint-config-next": "12.2.5",
"eslint-config-prettier": "^8.5.0",
"eslint-plugin-prettier": "^4.2.1",
"eslint-plugin-react": "^7.31.8",
"eslint-plugin-react-hooks": "^4.6.0",
"jest": "^29.0.3",
"jest-environment-jsdom": "^29.0.3",
"lint-staged": "^13.0.3",
"prettier": "2.7.1",
"ts-jest": "^29.0.1",
"typescript": "4.8.2"
}
}
Can you help me to solve this problem?
Ignore lorem ipsum
There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable.