Skip to content

Commit f75b277

Browse files
ScriptedAlchemyScriptedAlchemy
authored
chore: fix next hydration issues on antd (#2683)
Co-authored-by: ScriptedAlchemy <[email protected]>
1 parent fefd081 commit f75b277

File tree

14 files changed

+216
-154
lines changed

14 files changed

+216
-154
lines changed

‎apps/3000-home/next.config.js‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -42,7 +42,13 @@ const nextConfig = {
4242
},
4343
shared: {
4444
'lodash/': {},
45-
antd: {},
45+
antd: {
46+
requiredVersion: '5.18.3',
47+
version: '5.18.3',
48+
},
49+
'@ant-design/': {
50+
singleton: true,
51+
},
4652
},
4753
extraOptions: {
4854
debug: false,

‎apps/3000-home/package.json‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,8 @@
33
"version": "1.0.0",
44
"private": true,
55
"dependencies": {
6-
"antd": "4.24.15",
6+
"antd": "5.18.3",
7+
"@ant-design/cssinjs": "^1.21.0",
78
"buffer": "5.7.1",
89
"encoding": "0.1.13",
910
"eslint-scope": "7.2.2",

‎apps/3000-home/pages/_app.tsx‎

Lines changed: 30 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,12 @@
11
import * as React from 'react';
22
import { useState } from 'react';
33
import App from 'next/app';
4-
import { Layout, version } from 'antd';
4+
import { Layout, version, ConfigProvider } from 'antd';
5+
import { StyleProvider } from '@ant-design/cssinjs';
6+
57
import Router, { useRouter } from 'next/router';
68
const SharedNav = React.lazy(() => import('../components/SharedNav'));
79
import HostAppMenu from '../components/menu';
8-
import 'antd/dist/antd.css';
910
function MyApp(props) {
1011
const { Component, pageProps } = props;
1112
const { asPath } = useRouter();
@@ -36,28 +37,35 @@ function MyApp(props) {
3637
Router.events.off('routeChangeStart', handleRouteChange);
3738
};
3839
}, []);
39-
4040
return (
41-
<Layout style={{ minHeight: '100vh' }}>
42-
<React.Suspense>
43-
<SharedNav />
44-
</React.Suspense>
45-
<Layout>
46-
<Layout.Sider width={200}>
47-
<MenuComponent />
48-
</Layout.Sider>
49-
<Layout>
50-
<Layout.Content style={{ background: '#fff', padding: 20 }}>
51-
<Component {...pageProps} />
52-
</Layout.Content>
53-
<Layout.Footer
54-
style={{ background: '#fff', color: '#999', textAlign: 'center' }}
55-
>
56-
antd@{version}
57-
</Layout.Footer>
41+
<StyleProvider layer>
42+
<ConfigProvider theme={{ hashed: false }}>
43+
<Layout style={{ minHeight: '100vh' }} prefixCls={'dd'}>
44+
<React.Suspense>
45+
<SharedNav />
46+
</React.Suspense>
47+
<Layout>
48+
<Layout.Sider width={200}>
49+
<MenuComponent />
50+
</Layout.Sider>
51+
<Layout>
52+
<Layout.Content style={{ background: '#fff', padding: 20 }}>
53+
<Component {...pageProps} />
54+
</Layout.Content>
55+
<Layout.Footer
56+
style={{
57+
background: '#fff',
58+
color: '#999',
59+
textAlign: 'center',
60+
}}
61+
>
62+
antd@{version}
63+
</Layout.Footer>
64+
</Layout>
65+
</Layout>
5866
</Layout>
59-
</Layout>
60-
</Layout>
67+
</ConfigProvider>
68+
</StyleProvider>
6169
);
6270
}
6371

‎apps/3000-home/pages/index.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -93,7 +93,7 @@ const Home = () => {
9393
<td>
9494
Load federated component from checkout with old antd version
9595
</td>
96-
<td>[Button from antd@4.24.15]</td>
96+
<td>[Button from antd@5.18.3]</td>
9797
<td>
9898
<Suspense fallback="loading ButtonOldAnt">
9999
<ButtonOldAnt />

‎apps/3001-shop/next.config.js‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -34,7 +34,13 @@ const nextConfig = {
3434
},
3535
shared: {
3636
'lodash/': {},
37-
antd: {},
37+
antd: {
38+
requiredVersion: '5.18.3',
39+
version: '5.18.3',
40+
},
41+
'@ant-design/': {
42+
singleton: true,
43+
},
3844
},
3945
extraOptions: {
4046
exposePages: true,

‎apps/3001-shop/package.json‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,8 @@
44
"private": true,
55
"dependencies": {
66
"acorn": "7.4.1",
7-
"antd": "4.24.15",
7+
"antd": "5.18.3",
8+
"@ant-design/cssinjs": "^1.21.0",
89
"buffer": "5.7.1",
910
"chrome-trace-event": "1.0.3",
1011
"encoding": "0.1.13",

‎apps/3001-shop/pages/_app.tsx‎

Lines changed: 29 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,10 @@
11
import React, { Suspense, useState, lazy } from 'react';
22
import App from 'next/app';
3-
import { Layout, version } from 'antd';
3+
import { Layout, version, ConfigProvider } from 'antd';
44
import Router, { useRouter } from 'next/router';
5-
5+
import { StyleProvider } from '@ant-design/cssinjs';
66
import HostAppMenu from '../components/menu';
77

8-
import 'antd/dist/antd.css';
9-
108
const SharedNav = lazy(() => import('home/SharedNav'));
119

1210
function MyApp({ Component, pageProps }) {
@@ -40,26 +38,34 @@ function MyApp({ Component, pageProps }) {
4038
}, []);
4139

4240
return (
43-
<Layout style={{ minHeight: '100vh' }}>
44-
<Suspense fallback={'loading'}>
45-
<SharedNav />
46-
</Suspense>
47-
<Layout>
48-
<Layout.Sider width={200}>
49-
<MenuComponent />
50-
</Layout.Sider>
51-
<Layout>
52-
<Layout.Content style={{ background: '#fff', padding: 20 }}>
53-
<Component {...pageProps} />
54-
</Layout.Content>
55-
<Layout.Footer
56-
style={{ background: '#fff', color: '#999', textAlign: 'center' }}
57-
>
58-
antd@{version}
59-
</Layout.Footer>
41+
<StyleProvider layer>
42+
<ConfigProvider theme={{ hashed: false }}>
43+
<Layout style={{ minHeight: '100vh' }}>
44+
<Suspense fallback={'loading'}>
45+
<SharedNav />
46+
</Suspense>
47+
<Layout>
48+
<Layout.Sider width={200}>
49+
<MenuComponent />
50+
</Layout.Sider>
51+
<Layout>
52+
<Layout.Content style={{ background: '#fff', padding: 20 }}>
53+
<Component {...pageProps} />
54+
</Layout.Content>
55+
<Layout.Footer
56+
style={{
57+
background: '#fff',
58+
color: '#999',
59+
textAlign: 'center',
60+
}}
61+
>
62+
antd@{version}
63+
</Layout.Footer>
64+
</Layout>
65+
</Layout>
6066
</Layout>
61-
</Layout>
62-
</Layout>
67+
</ConfigProvider>
68+
</StyleProvider>
6369
);
6470
}
6571

‎apps/3002-checkout/next.config.js‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -34,7 +34,13 @@ const nextConfig = {
3434
},
3535
shared: {
3636
'lodash/': {},
37-
antd: {},
37+
antd: {
38+
requiredVersion: '5.18.3',
39+
version: '5.18.3',
40+
},
41+
'@ant-design/': {
42+
singleton: true,
43+
},
3844
},
3945
extraOptions: {
4046
exposePages: true,

‎apps/3002-checkout/package.json‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,8 @@
44
"private": true,
55
"dependencies": {
66
"acorn": "7.4.1",
7-
"antd": "4.24.15",
7+
"antd": "5.18.3",
8+
"@ant-design/cssinjs": "^1.21.0",
89
"buffer": "5.7.1",
910
"chrome-trace-event": "1.0.3",
1011
"encoding": "0.1.13",

‎apps/3002-checkout/pages/_app.tsx‎

Lines changed: 27 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
11
import React, { Suspense, lazy, useState } from 'react';
22
import App from 'next/app';
3-
import { Layout, version } from 'antd';
3+
import { Layout, version, ConfigProvider } from 'antd';
44
import Router, { useRouter } from 'next/router';
5+
import { StyleProvider } from '@ant-design/cssinjs';
56

67
import HostAppMenu from '../components/menu';
7-
import 'antd/dist/antd.css';
88

99
const SharedNav = lazy(() => import('home/SharedNav'));
1010

@@ -39,24 +39,32 @@ function MyApp({ Component, pageProps }) {
3939
}, []);
4040

4141
return (
42-
<Layout style={{ minHeight: '100vh' }}>
43-
<SharedNav />
44-
<Layout>
45-
<Layout.Sider width={200}>
46-
<MenuComponent />
47-
</Layout.Sider>
48-
<Layout>
49-
<Layout.Content style={{ background: '#fff', padding: 20 }}>
50-
<Component {...pageProps} />
51-
</Layout.Content>
52-
<Layout.Footer
53-
style={{ background: '#fff', color: '#999', textAlign: 'center' }}
54-
>
55-
antd@{version}
56-
</Layout.Footer>
42+
<StyleProvider layer>
43+
<ConfigProvider theme={{ hashed: false }}>
44+
<Layout style={{ minHeight: '100vh' }}>
45+
<SharedNav />
46+
<Layout>
47+
<Layout.Sider width={200}>
48+
<MenuComponent />
49+
</Layout.Sider>
50+
<Layout>
51+
<Layout.Content style={{ background: '#fff', padding: 20 }}>
52+
<Component {...pageProps} />
53+
</Layout.Content>
54+
<Layout.Footer
55+
style={{
56+
background: '#fff',
57+
color: '#999',
58+
textAlign: 'center',
59+
}}
60+
>
61+
antd@{version}
62+
</Layout.Footer>
63+
</Layout>
64+
</Layout>
5765
</Layout>
58-
</Layout>
59-
</Layout>
66+
</ConfigProvider>
67+
</StyleProvider>
6068
);
6169
}
6270

0 commit comments

Comments
 (0)