🐛[BUG] next14 + ant design5.18.2 ，使用 官网登录表单案例报错： TypeError: Cannot read properties of undefined (reading 'Group')

[Edwin-WB-Li]

🐛 bug 描述

复制官网案例，啥也没改，运行报错：TypeError: Cannot read properties of undefined (reading 'Group')

📷 复现步骤

版本信息：
"dependencies": {
"@ant-design/cssinjs": "^1.21.0",
"@ant-design/nextjs-registry": "^1.0.0",
"@ant-design/pro-components": "^2.7.10",
"@emotion/react": "^11.11.4",
"@emotion/styled": "^11.11.5",
"@fortune-sheet/react": "^0.19.9",
"antd": "^5.18.2",
"axios": "^1.7.2",
"bcryptjs": "^2.4.3",
"express": "^4.19.2",
"http-proxy-middleware": "^3.0.0",
"i18next": "^23.11.5",
"joi": "^17.13.1",
"jsonwebtoken": "^9.0.2",
"moment": "^2.30.1",
"mongoose": "^8.4.1",
"next": "14.2.4",
"next-cookies": "^2.0.3",
"next-i18next": "^15.3.0",
"next-intl": "^3.15.2",
"nodemon": "^3.1.2",
"react": "^18",
"react-dom": "^18",
"react-i18next": "^14.1.2",
"sass": "^1.77.4",
"sharp": "^0.33.4",
"typescript": "^5.4.5"

}, "devDependencies": { "@types/bcryptjs": "^2.4.6", "@types/jsonwebtoken": "^9.0.6", "@types/node": "^20.14.5", "@types/react": "18.3.3", "eslint": "^8", "eslint-config-next": "14.2.3", "node-sass": "^9.0.0" }

🏞 期望结果

描述你原本期望看到的结果

💻 复现代码

LoginForm 登录表单案例： https://procomponents.ant.design/components/login-form

© 版本信息

• ProComponents 版本: 2.7.10
• 浏览器环境
• 开发环境 window

🚑 其他信息

[Edwin-WB-Li]

[json-q]

antd有说明：https://ant-design.antgroup.com/docs/react/use-with-next-cn

[chunlinzhou]

遇到了同样的问题，是什么原因呢

[contribute-to]

14.0.2 可以用，上去全都會錯

[wtcodeai]

Here solution for actual 14 and 15 versions of Next.js ant latest antd + pro components, tested with 14.2.24 and 15.1.17 builds

So, due to research: in some releases of Next.js versions some transpiles and optimizations for antd libs was removed (from defaults in Next sources)

With that config you can build ant/pro-components with latest Next versions

const nextConfig: NextConfig = {
  reactStrictMode: true,
  experimental: {
    forceSwcTransforms: true,
    optimizePackageImports: [
      '@ant-design/pro-card',
      '@ant-design/pro-components',
      '@ant-design/pro-descriptions',
      '@ant-design/pro-field',
      '@ant-design/pro-form',
      '@ant-design/pro-layout',
      '@ant-design/pro-list',
      '@ant-design/pro-layout',
      '@ant-design/pro-provider',
      '@ant-design/pro-skeleton',
      '@ant-design/pro-table',
      '@ant-design/pro-utils',
    ]
  },
  transpilePackages: [
    'antd',
    '@ant-design',
    'rc-cascader',
    'rc-checkbox',
    'rc-collapse',
    'rc-dialog',
    'rc-drawer',
    'rc-dropdown',
    'rc-field-form',
    'rc-image',
    'rc-input',
    'rc-input-number',
    'rc-mentions',
    'rc-menu',
    'rc-motion',
    'rc-notification',
    'rc-pagination',
    'rc-picker',
    'rc-progress',
    'rc-rate',
    'rc-resize-observer',
    'rc-segmented',
    'rc-select',
    'rc-slider',
    'rc-steps',
    'rc-switch',
    'rc-table',
    'rc-tabs',
    'rc-textarea',
    'rc-tooltip',
    'rc-tree',
    'rc-tree-select',
    'rc-upload',
    'rc-util',
  ],
};

Remember that some components like ProLayout and LoginForm do not work with ssr correctly, so use next/dynamic with ssr: false to import that components, otherwise build fails