Почему Ant Design выдает ошибку сервера при попытке использовать date-fns?

#typescript #next.js #antd #date-fns

#typescript #next.js #antd #date-fns

Вопрос:

После замены Moment.js с помощью date-fns, используя это руководство из документации antd, я получаю следующую ошибку сервера:

Скриншот ошибки.

Ошибка синтаксиса: невозможно использовать оператор импорта вне модуля

Я пробовал такие вещи, как добавление 'type': 'module' в package.json и добавление 'module': 'commonjs' tsconfig.json и многое другое, но, похоже, ничего не работает.

Ответ №1:

Понял. Решение состояло в том, чтобы заменить 'antd/es/...' на 'antd/lib/...' в импорте, представленном в документации, и ошибка исчезла.

Ваш DatePicker.tsx должен выглядеть следующим образом

 import dateFnsGenerateConfig from 'rc-picker/lib/generate/dateFns';
import generatePicker from 'antd/lib/date-picker/generatePicker';
import 'antd/lib/date-picker/style/index';

const DatePicker = generatePicker<Date>(dateFnsGenerateConfig);

export default DatePicker;