search

vercel / next.js

The React Framework
https://nextjs.org
MIT License
126.92k stars 26.97k forks source link

Antd doesn't work #60154

Open xiaoqufengdi opened 10 months ago

xiaoqufengdi commented 10 months ago

Link to the code that reproduces this issue

https://github.com/xiaoqufengdi/mortgageCalculator.git

To Reproduce

1、 add 'antd' into my project. 2、 I use a component of antd such as Layout 3、 It's report a bug.

Current vs. Expected behavior

It's doesn't work. Internal error: Error: Could not find the module "~\node_modules.store\antd@5.12.7\node_modules\antd\es\index.js#Layout#Footer" in the React Client Manifest. This is probably a bug in the React Server Components bundler.

Verify canary release

Provide environment information

window 10
node 19.3.0
npm   9.4.1
// package.json
"antd": "^5.12.7",
"next": "14.0.4",
"react": "^18",
"react-dom": "^18"

Which area(s) are affected? (Select all that apply)

Module resolution (CJS / ESM, module resolving)

Which stage(s) are affected? (Select all that apply)

next dev (local)

Additional context

No response

michel-paiva commented 10 months ago

I had the same issue, apparently some components only work client side.

hichemfantar commented 10 months ago

Like what @michel-paiva said. Can you verify that the 'use client' directive is being used? https://nextjs.org/docs/app/building-your-application/rendering/client-components#using-client-components-in-nextjs

xiaoqufengdi commented 10 months ago

Antd is a third-party package, not my component.

hichemfantar commented 10 months ago

Antd is a third-party package, not my component.

Try adding the 'use client' directive to the top of all files that import Antd