Problem with dayjs localizer in astro-react component: Cannot read properties of undefined (reading 'formats')

[Rigel772]

Check that this is really a bug

• [X] I confirm

Reproduction link

https://codesandbox.io/p/sandbox/astro-react-big-calendar-nky2zl?file=%2Fpackage.json&selection=%5B%7B%22endColumn%22%3A27%2C%22endLineNumber%22%3A25%2C%22startColumn%22%3A27%2C%22startLineNumber%22%3A25%7D%5D

Bug description

when you go to: https://nky2zl-3000.csb.app/calendar you see error:

Cannot read properties of undefined (reading 'formats')
  File:
    /workspace/node_modules/react-big-calendar/lib/localizer.js:157:87
  Code:
    156 | function mergeWithDefaults(localizer, culture, formatOverrides, messages) {
    > 157 |   var formats = (0, _objectSpread2.default)((0, _objectSpread2.default)({}, localizer.formats), formatOverrides);
          |                                                                                       ^
      158 |   return (0, _objectSpread2.default)((0, _objectSpread2.default)({}, localizer), {}, {
      159 |     messages: messages,
      160 |     startOfWeek: function startOfWeek() {

Expected Behavior

see calendar

Actual Behavior

white page

react-big-calendar version

1.6.8

React version

18.2.0

Platform/Target and Browser Versions

all web

Validations

• [X] Read the docs.
• [X] Check that there isn't already an issue that request the same feature to avoid creating a duplicate.
• [X] Make sure this is a react-big-calendar issue and not an implementation issue

Would you like to open a PR for this bug?

• [ ] I'm willing to open a PR

[bu6n]

That's most probably something to configure with astro.

See here: other people have similar problems with Next.js, which makes me think the problem has nothing to do with react-big-calendar. Maybe it would be better to ask in the astro community? And then tell us how you solved it :smiley:

[bu6n]

Well in your case, I think I got it working by replacing

export default Calendar;

with

export default MyCalendar;

[Rigel772]

Silly mistake... thanks a lot for your help!