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

tmi-smjeong commented 2 months ago

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 commented 2 months ago

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 commented 1 month ago

Closing this due to inactivity.

refinedev / refine