在 layout 中使用 config provider，并且页面中有 server component 用了 antd 就会报错 #1
Comments
|
ConfigProvider 要放在 Registry 下面 |
放下面还是一样的报错，你试试呢 |
|
确实有问题，目前的 workaround 是把 ConfigProvider 封装一下，加上 use client 即可。 |
|
没有使用 ConfigProvider，遇到了同样的问题，放 Button 组件正常，换了一个 Divider 组件，就有这个错误。 // 现在的方式
import Divider from "antd/es/divider";
// 原先的方式
import { Divider } from "antd"; |
|
官网示例的问题,看到新的导入方法赶紧换成使用 PS：因为我的项目还集成了 tailwindcss,当我加入 下面示例是我在项目中使用 @ant-design/nextjs-registry 时用法： 可以新建一个 "use client"
import React from "react";
import { ConfigProvider } from "antd";
import en_US from "antd/locale/en_US";
import type { ThemeConfig } from "antd";
# 为了解决 Tailwind 的基本样式覆盖了antd组件库样式
import { StyleProvider } from "@ant-design/cssinjs"
const theme: ThemeConfig = {
token: {
fontSize: 14,
colorPrimary: "#10b981",
},
components: {
Button: {
fontWeight: 400,
},
},
};
const AntdConfigRegistry = ({ children }: React.PropsWithChildren) => {
return (
<ConfigProvider locale={en_US} theme={theme}>
<StyleProvider hashPriority="high">
{children}
</StyleProvider>
</ConfigProvider>
);
};
export default AntdConfigRegistry;然后再 // App Router 使用 Antd: https://ant-design.antgroup.com/docs/react/use-with-next-cn#%E4%BD%BF%E7%94%A8-app-router
import { AntdRegistry } from "@ant-design/nextjs-registry";
import AntdConfigProvider from "@/components/AntdConfigProvider";
import "@/styles/globals.css";
export const metadata = {
title: "Next.js"
};
const RootLayout = ({ children }: { children: React.ReactNode }) => {
return (
<html lang="en" suppressHydrationWarning>
<body>
<AntdRegistry>
<AntdConfigProvider>
{children}
</AntdConfigProvider>
</AntdRegistry>
</body>
</html>
);
};
export default RootLayout;在加载页面时，又给我整无语了，闪屏的问题又来了！！！！ 😐 算了，不折腾了，我还是退回之前集成的方法吧，如果是我使用姿势不对，欢迎各位大佬批评指正 🫡 参考代码如下： 新建 "use client";
import React from "react";
import { useServerInsertedHTML } from "next/navigation";
import { createCache, extractStyle, StyleProvider } from "@ant-design/cssinjs";
import type Entity from "@ant-design/cssinjs/es/Cache";
import { ConfigProvider } from "antd";
import en_US from "antd/locale/en_US";
const theme: ThemeConfig = {
token: {
colorPrimary: "#10b981",
}
};
const AntdRegistry = ({ children }: React.PropsWithChildren) => {
const isServerInserted = React.useRef<boolean>(false);
const cache = React.useMemo<Entity>(() => createCache(), []);
useServerInsertedHTML(() => {
// 避免 css 重复插入
if (isServerInserted.current) {
return;
}
isServerInserted.current = true;
return (
<style
id="antd"
dangerouslySetInnerHTML={{ __html: extractStyle(cache, true) }}
/>
);
});
return (
<StyleProvider cache={cache}>
<ConfigProvider locale={en_US} theme={theme}>
{children}
</ConfigProvider>
</StyleProvider>
);
};在 import AntdRegistry from "@/components/AntdRegistry";
import "@/styles/globals.css";
export const metadata = {
title: "Next.js"
};
const RootLayout = ({ children }: { children: React.ReactNode }) => {
return (
<html lang="en" suppressHydrationWarning>
<body>
<AntdRegistry>
{children}
</AntdRegistry>
</body>
</html>
);
};
export default RootLayout; |
|
@liaoyio 这个包是为了帮助用户踩坑用的，基本实现也是这些，有问题可以直接在这个包里解决，不用多次更新 antd 的文档与 example 了。 |
看样子是 antd 的 provider 没有 use client 造成的，要不把 and 的 provider 在这个库里面封装一下，加上 use client？ |
比如说，把项目中的 example/with-app-router 改一下：
这样就会报错
Error: Element type is invalid. Received a promise that resolves to: undefined. Lazy element type must resolve to a class or function.The text was updated successfully, but these errors were encountered: