Production Builds with Vite and AntD theme not running correctly

Prerequisites

• I have searched the existing issues
• I understand that providing a SSCCE example is tremendously useful to the maintainers.
• I have read the documentation
• Ideally, I’m providing a sample JSFiddle or a shared playground link demonstrating the issue.

What theme are you using?

antd

Version

4.2.2

Current Behavior

We are upgrading a project from Webpack to Vite. Currently in development this all works and loads correctly but we have encountered an error with the production build.

After building a production bundle using Vite & AntD theme, there is a console error Uncaught TypeError: generatePickerExports is not a function.

Expected Behavior

Expect the page to load correctly after a production build

Steps To Reproduce

1. Use a base Vite project npm create vite@latest . --template react-ts
2. npm install @rjsf/core@^4.2.2 @rjsf/antd@^4.2.2
3. Create base page with form
4. Run npm run dev and page loads fine
5. Run npm build, which runs successfully
6. Load browser and see error in the console

Environment

- OS: MacOS 12.3
- Node: v16.16.0
- npm: 8.14.0
- vite: 3.0.0
- typescript: 4.6.4
- react: 18.2.0
- antd: 4.22.1

Anything else?

This looks like it may be cause in the import to override moment.js with day.js in this file https://github.com/rjsf-team/react-jsonschema-form/blob/4049011ea59737232a86c193d96131ce61be85fa/packages/antd/src/components/DatePicker/index.js

[aprilis]

For me it worked to add this alias to vite.config.js:

resolve: {
    alias: [
      {
        find: "antd/lib",
        replacement: "antd/es",
      }
    ],
  },

[ezze]

I faced the same issue. The problem is that antd and rc-picker components are imported from lib directories containing CommonJS modules not compatible with Vite. Vite requires ES modules. Although @rjsf/antd/dist/antd.esm.js is used in Vite build it contains imports of CommonJS modules from antd and rc-picker. So in order to fix the issue for Vite you have to import ES modules everywhere across this project. As example, DatePicker/index.js mentioned above:

import dayjsGenerateConfig from 'rc-picker/lib/generate/dayjs';
import generatePicker from 'antd/lib/date-picker/generatePicker';

const DatePicker = generatePicker(dayjsGenerateConfig);

export default DatePicker;

should be changed to:

import dayjsGenerateConfig from 'rc-picker/es/generate/dayjs';
import generatePicker from 'antd/es/date-picker/generatePicker';

const DatePicker = generatePicker(dayjsGenerateConfig);

export default DatePicker;

As a quick workaround I applied the following patch to antd.esm.js (version 4.23.0) using patch-package:

diff --git a/node_modules/@rjsf/antd/dist/antd.esm.js b/node_modules/@rjsf/antd/dist/antd.esm.js
index 88344cc..50b041d 100644
--- a/node_modules/@rjsf/antd/dist/antd.esm.js
+++ b/node_modules/@rjsf/antd/dist/antd.esm.js
@@ -1,28 +1,28 @@
 import { utils, withTheme } from '@rjsf/core';
 import React, { useState, useEffect } from 'react';
 import classNames from 'classnames';
-import { withConfigConsumer } from 'antd/lib/config-provider/context';
-import Form$1 from 'antd/lib/form';
-import Button from 'antd/lib/button';
-import Col from 'antd/lib/col';
-import Input from 'antd/lib/input';
-import Row from 'antd/lib/row';
+import { withConfigConsumer } from 'antd/es/config-provider/context';
+import Form$1 from 'antd/es/form';
+import Button from 'antd/es/button';
+import Col from 'antd/es/col';
+import Input from 'antd/es/input';
+import Row from 'antd/es/row';
 import DeleteOutlined from '@ant-design/icons/DeleteOutlined';
 import _ from 'lodash-es';
 import PlusCircleOutlined from '@ant-design/icons/PlusCircleOutlined';
 import ArrowDownOutlined from '@ant-design/icons/ArrowDownOutlined';
 import ArrowUpOutlined from '@ant-design/icons/ArrowUpOutlined';
-import Checkbox from 'antd/lib/checkbox';
+import Checkbox from 'antd/es/checkbox';
 import dayjs from 'dayjs';
-import dayjsGenerateConfig from 'rc-picker/lib/generate/dayjs';
-import generatePicker from 'antd/lib/date-picker/generatePicker';
-import Radio from 'antd/lib/radio';
-import Slider from 'antd/lib/slider';
-import Select from 'antd/lib/select';
-import InputNumber from 'antd/lib/input-number';
-import Alert from 'antd/lib/alert';
-import List from 'antd/lib/list';
-import Space from 'antd/lib/space';
+import dayjsGenerateConfig from 'rc-picker/es/generate/dayjs';
+import generatePicker from 'antd/es/date-picker/generatePicker';
+import Radio from 'antd/es/radio';
+import Slider from 'antd/es/slider';
+import Select from 'antd/es/select';
+import InputNumber from 'antd/es/input-number';
+import Alert from 'antd/es/alert';
+import List from 'antd/es/list';
+import Space from 'antd/es/space';
 import ExclamationCircleOutlined from '@ant-design/icons/ExclamationCircleOutlined';
 
 function _extends() {