react-jsonschema-form: 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

Use a base Vite project npm create vite@latest . --template react-ts
npm install @rjsf/core@^4.2.2 @rjsf/antd@^4.2.2
Create base page with form
Run npm run dev and page loads fine
Run npm build, which runs successfully
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

About this issue

Original URL
State: closed
Created 2 years ago
Reactions: 3
Comments: 15 (7 by maintainers)

Commits related to this issue

Fix #2962 to properly build esm version for antd - Updated `package*.json` to add `@rollup/plugin-replace` - Added a `dts.config.js` file that caused `antd/lib` and `rc-picker/lib` to be replaced with... — committed to heath-freenome/react-jsonschema-form by heath-freenome 2 years ago
Fix #2962 to properly build esm version for antd - Updated `package*.json` to add `@rollup/plugin-replace` - Added a `dts.config.js` file that caused `antd/lib` and `rc-picker/lib` to be replaced with... — committed to heath-freenome/react-jsonschema-form by heath-freenome 2 years ago
Fix #2962 to properly build esm version for antd - Updated `package*.json` to add `@rollup/plugin-replace` - Added a `dts.config.js` file that caused `antd/lib` and `rc-picker/lib` to be replaced with... — committed to heath-freenome/react-jsonschema-form by heath-freenome 2 years ago
Fix #2962 to properly build esm version for antd - Updated `package*.json` to add `@rollup/plugin-replace` - Added a `dts.config.js` file that caused `antd/lib` and `rc-picker/lib` to be replaced with... — committed to heath-freenome/react-jsonschema-form by heath-freenome 2 years ago
Fix #2962 to properly build esm version for antd - Updated `package*.json` to add `@rollup/plugin-replace` - Added a `dts.config.js` file that caused `antd/lib` and `rc-picker/lib` to be replaced with... — committed to heath-freenome/react-jsonschema-form by heath-freenome 2 years ago
Fix #2962 to properly build esm version for antd (#3044) - Updated `package*.json` to add `@rollup/plugin-replace` - Added a `dts.config.js` file that caused `antd/lib` and `rc-picker/lib` to be rep... — committed to rjsf-team/react-jsonschema-form by heath-freenome 2 years ago
Fix #2962 to properly build esm version for antd (#3044) - Updated `package*.json` to add `@rollup/plugin-replace` - Added a `dts.config.js` file that caused `antd/lib` and `rc-picker/lib` to be rep... — committed to heath-freenome/react-jsonschema-form by heath-freenome 2 years ago

Most upvoted comments

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

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

aprilis on Aug 23, 2022

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() {

ezze on Aug 18, 2022