Why is Ant Design throwing a Server Error when trying to use date-fns?

Question

After replacing Moment.js with date-fns using this guide from the antd documentation I get the next server error:

Screenshot of error.

SyntaxError: Cannot use import statement outside a module

I've tried things like adding 'type': 'module' to the package.json and putting 'module': 'commonjs' in tsconfig.json and many other things but none seem to work.

Answer 1

Got it. The solution was to replace 'antd/es/...' with 'antd/lib/...' in the imports provided in the documentation and the error was gone.

Your DatePicker.tsx should look like this

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;