[BUG] Module import error when using with @refinedev/chakra-ui and Next.js.

[tmi-smjeong]

Describe the bug

Hello.

Following the documentation at the this Link in a new NextJS project, an issue occurs while setting up the theme for ‘ChakraProvider’.

It uses the same source code as the documentation, so there is no source code to attach.

Unhandled Runtime Error
Error: Could not find the module "/{PROJECT_PATH}/node_modules/@refinedev/chakra-ui/dist/index.mjs#RefineThemes#Blue" in the React Client Manifest. This is probably a bug in the React Server Components bundler.

Steps To Reproduce

Expected behavior

It should behave normally based on the colour of the Theme entered, such as <ChakraProvider theme={RefineThemes.Blue}>.

Packages

  "dependencies": {
    "@chakra-ui/react": "^2.8.2",
    "@refinedev/chakra-ui": "^2.32.0",
    "@refinedev/cli": "^2.16.37",
    "@refinedev/core": "^4.54.0",
    "@refinedev/devtools": "^1.2.7",
    "@refinedev/nextjs-router": "^6.1.0",
    "@refinedev/react-hook-form": "^4.9.0",
    "@refinedev/react-table": "^5.6.13",
    "@tabler/icons-react": "^3.14.0",
    "@tanstack/react-table": "^8.20.5",
    "next": "14.2.7",
    "react": "^18",
    "react-dom": "^18",
    "react-hook-form": "^7.53.0"
  },
  "devDependencies": {
    "@types/node": "^20",
    "@types/react": "^18",
    "@types/react-dom": "^18",
    "cross-env": "^7.0.3",
    "eslint": "^8",
    "eslint-config-next": "14.2.7",
    "typescript": "^5"
  },

Additional Context

No response

[BatuhanW]

Hey @tmi-smjeong as the error says, i think it's related to NextJS server components. Could you try adding use client direct to the top of your file? If it doesn't work, please create a minimal reproducible example please.

[aliemir]

Closing this due to inactivity.