Next.js compatibility feedback collection #43510
Comments
This is the issue I am encountering on next ts now using antd. Form throws this warning and I can't tell what is wrong for real
|
Check your |
|
I face this issue currently on next ts using antd. This error only shown after saving changes (Fast Refresh). But if I hard reload the page, it become normal again. And this keeps happening as long as I save every changes which trigger next's fast refresh. I'm not sure what is wrong with this. This fast refresh just act normal when I'm not use antd, so i guess nothing is wrong with next ts. Edited: |
|
@sahaja56 I also met this problem. Have you solved this problem yet? |
Let me check this. Seem HMR destroy the cache instance but not rebuild it |
|
Any plans to move away from sub components? Since most usecases will require layout and form (atleast for me), it would mean I have to make every page use client otherwise I get the below error.
The way I can go around this, is by passing components as props in a client component "use client";
import { Layout } from "antd";
import React, { PropsWithChildren } from "react";
const { Header, Content } = Layout;
export default function SiteLayout({
header,
children: content,
}: PropsWithChildren<{
header: React.ReactNode;
}>) {
return (
<Layout>
<Header style={{ display: "flex", alignItems: "center", gap: "4" }}>
{header}
</Header>
<Content>{content}</Content>
</Layout>
);
}But this doesnt seem feasible for any layout or nested layouts across an entire application. Would love any inputs on this. |
|
@headironc @thisisandreww I tried to update to the latest antd version and it fixes the problem now. |
|
Same problem with sub-components. Any progress or plans for Antd or Next.js now? I don't know how to make server-side data fetch and sub-components work together. If I use sub-components, it must need to use client component, but after that I cannot fetch data at server-side any more. 在子组件上遇到了同样的问题。Antd或者Next.js在这方面有任何进展或者计划吗？ 我不知道怎么在使用子组件的同时在服务端完成数据获取。如果我使用了子组件，就必须要将页面转为客户端组件，此时我无法再实现服务端的数据获取。 这违背了使用Next.js实现SSR的初衷，如果数据都需要在客户端获取，使用Next.js将没有任何意义。 |
|
@WankkoRee, 你是可以混合使用 RSC 和 CC 的。它只是限制一个组件要么是客户端渲染要么是服务端渲染，并没有限制组件的子节点要去跟随父节点。对于需要前端交互的就 |
|
Antd styles are overriding my tailwind css classes |
You can use |
|
next build fails next@13.5.4 I am currently using the form component in one of my client rendered files by importing it like so: import { Form } from "antd";This error occurs and build fails. I have tried:
const PhoneNumberSubmit = dynamic(import("../PhoneNumberSubmit"), {
ssr: false,
}); // does not work
|
Nvm found the issue: if you are using useForm and importing it like this: import { useForm } from "antd/es/form/Form";
const [form] = useForm();Do not, this is what causes it, use the useForm method of the Form component instead const [form] = Form.useForm(); |
You should not import from the package path since Next do some magic for the path resolution to speed up build perf. |
|
Let me introduce two bugs that i've faced when using streaming: |
|
We have tried using the "whole export" process to get styles in SSR, but it never worked correctly. The layouts would get all distorted. I have added However, this is not working all as expected either. We get this error when using the Also, the app does not get styled correctly in the first render; only once the context of the theme changes are the style changes applied. Our current solution is using the |
|
import React from 'react' const inter = Inter({ subsets: ['latin'] }) export const metadata = { export default function RootLayout({ 我是使用了antd的最新版本按照官网的写法来 但是还是出现了页面刷新抖动的现象 我还有什么需要注意的地方去避免这个抖动的发生吗 |
|
i am encoutering the following error after upgrading next.js, antd and @ant-design/cssinjs ⨯ ./node_modules/antd/node_modules/classnames/index.js
| // This field is set when the previous version of this module was a Import trace for requested module: package.json next.config.js includes what is causing this and does anyone have a solution? |
|
I'm trying to port my app to use the App Router, however the styles import order is wrong. Reproduction code: The above code should make the button red, however 
Versions used: |
Getting the same error. @annbeemsterboer did you find a fix? :) |
to be honest i dont really know what did the trick, i started again from scratch and then it worked. i have the suspicion it had to do with the next config for for me it worked with this (partial) config: // next.config.js i had to change imports for some of the types. i am using a custom setup with not sure if any of this is helpful for you, this was for my setup :) |
Thank you for taking the time to share @annbeemsterboer. Much appreciated. I’ll try it out :) |
|
Re-exported Ant Design components don't have same style with the original components in Nextjs project |
did u fix it? |
English Description
Before All
If you meet the problem, please make sure:
antd&nextto latest versionnextcanaryversion. Some problem may be fixed but not released yet.What to leave message in this issue?
a. minimal reproduction is very important to us for fast dig problem
npm run build)/xxx/xxxpage)中文描述
在开始前
如果你遇到任何问题，请优先：
antd与next的版本。next的canary版本。一些编译问题已经解决但是尚未发布。这个 issue 下我该做什么？
a. 最小重现 非常重要，复杂的代码会难以找出问题所在
npm run build)/xxx/xxx页面中，Button 的样式丢失了)The text was updated successfully, but these errors were encountered: