1

I am using react-dates in my next.js project. Right now I am working on localisation. As I am very keen on having a good performance I don't want to import moment.js synchronous as it is very heavy according to bundlephobia and my own experience (https://bundlephobia.com/result?p=moment@2.29.1). I want to load moment asynchronous (dynamic import in next.js).

This code works synchronous (normal import statement) in the render function but of course it doesn't work if I load moment dynamic.

import moment from 'moment'; 

...

render () {
...
moment.updateLocale('en', {
  week: {
    dow: 1,
  },
})
...
}

So how can I load moment dynamically and update the locale? Is there a way?

Thank you!

Hofmann Florian
  • 11
  • 1
  • 2
  • 2
    How have you tried to import `moment` dynamically? Also, keep in mind that Moment.js is a legacy project, and if you're worried about bundle size you should consider moving to a more lightweight alternative like [`date-fns`](https://www.npmjs.com/package/date-fns) or [`day.js`](https://www.npmjs.com/package/dayjs) – juliomalves Mar 24 '21 at 16:03
  • react-dates itself is nice because it also brings the UI with it. I did load it dynamic like this. `import dynamic from "next/dynamic"; const Moment = dynamic(() => import("moment"), { ... do sth ... if needed ... });` The thing is that I need to put the updateLocal function in the render function otherwise moment is not yet defined. – Hofmann Florian Mar 24 '21 at 20:46

0 Answers0