Error: Could not find the module "E:\custome-store-app\node_modules\rsuite\esm\index.js#FlexboxGrid#Item" in the React Client Manifest. This is probably a bug in the React Server Components bundler.

[AgileData2020]

What version of rsuite are you using?

5.60.2

What version of React are you using?

^18

What version of TypeScript are you using (if any)?

No response

What browser are you using?

chrome and firefox

Describe the Bug

Error: Could not find the module "E:\custome-store-app\node_modules\rsuite\esm\index.js#FlexboxGrid#Item" in the React Client Manifest. This is probably a bug in the React Server Components bundler. facing that issue when use FlexboxGrid and FlexboxGrid.Item in server component in next js

"dependencies": {
"bcryptjs": "^2.4.3",
"jsonwebtoken": "^9.0.2",
"mongoose": "^8.3.4",
"multer": "^1.4.5-lts.1",
"next": "14.2.3",
"react": "^18",
"react-dom": "^18",
"rsuite": "^5.60.2"
},
"devDependencies": {
"@types/bcryptjs": "^2.4.6",
"@types/node": "20.12.12",
"typescript": "5.4.5"
}

Expected Behavior

crate FlexboxGrid must work in next js 13 and 14 in server side component

To Reproduce

No response

[simonguo]

Hi @AgileData2020

This is a bug that Nextjs has not solved yet. vercel/next.js#58776

There are two ways to temporarily solve it:

1. Add use client comment in your file.
2. Modify the path of the imported component.

import FlexboxGrid from 'rsuite/esm/FlexboxGrid';
import FlexboxGridItem from 'rsuite/esm/FlexboxGrid/FlexboxGridItem';

[simonguo]

Simplified the import path of the component in rsuite@5.64.0.

import FlexboxGrid from 'rsuite/FlexboxGrid';
import FlexboxGridItem from 'rsuite/FlexboxGridItem'; 

Complete example reference: https://github.com/rsuite/rsuite/tree/main/examples/with-nextjs-app