Update from 2.20.2 to 2.20.3 breaks my application with "de" locale

[croraf]

I also tried 2.21.3 (latest current). And the app still breaks.

I'm using date-fns for react-big-calendar library.

To reproduce:

• open https://codesandbox.io/s/date-fns-bug-e41tx?file=/src/App.js

How it supposed to work:

• reduce date-fns version to 2.20.2 and it will work as expected

[fturmel]

I deleted my previous reply because I thought the date-fns dependency in codesandbox was wrong, but I think it was fine after all. Give this a shot. Like I previously mentioned, prob mixing require and import syntax isn't the best idea to begin with.

import { Calendar, dateFnsLocalizer } from 'react-big-calendar'
import {format, parse, startOfWeek, getDay} from 'date-fns'
import {enUS, de} from 'date-fns/locale'

const locales = {
  'en-US': enUS,
  'de': de,
};

const localizer = dateFnsLocalizer({
  format,
  parse,
  startOfWeek,
  getDay,
  locales,
})

const MyCalendar = props => (
  <div>
    <Calendar
      style={{ height: 500, width: 500, margin: 'auto', }}
      localizer={localizer}
      culture='de'
      startAccessor="start"
      endAccessor="end"
      events={[]}
    />
  </div>
)

export default MyCalendar;

[croraf]

Yes, import instead of require works. I also noticed that I imported de locale already before in the other place of the app.

[fturmel]

Some additional details after a bit of digging:

Something changed in the import behavior for locales in the 2.1.0 release. See this specific commit: 0a9213b

So I think your code sample would've worked back in version 2.0 of date-fns, but not 2.1.0 and greater. However, there was a regression bug that broke this between release 2.17 and 2.20.2 (see #2207), allowing that require syntax to work again temporarily.

Here's another interesting bit, you can make require work in the latest date-fns version by referencing the index file directly, which makes me think that maybe we could restore the way 2.0 was working by adding a main property to nested package.json files in the project to give cjs the right path. I will investigate and possibly put together a PR for this.

import { Calendar, dateFnsLocalizer } from 'react-big-calendar'
import format from 'date-fns/format'
import parse from 'date-fns/parse'
import startOfWeek from 'date-fns/startOfWeek'
import getDay from 'date-fns/getDay'

const locales = {
  'en-US': require('date-fns/locale/en-US/index'),
  'de': require('date-fns/locale/de/index'),
};

const localizer = dateFnsLocalizer({
  format,
  parse,
  startOfWeek,
  getDay,
  locales,
})

const MyCalendar = props => (
  <div>
    <Calendar
      style={{ height: 500, width: 500, margin: 'auto', }}
      localizer={localizer}
      culture='de'
      startAccessor="start"
      endAccessor="end"
      events={[]}
    />
  </div>
)

export default MyCalendar;

[hoxu]

Same here, 2.20.2 works as before, 2.20.3 results in Uncaught RangeError: locale must contain localize property.

ClojureScripts in this case. Require used in 2.20.2:

  (:require
    ["date-fns/locale/fi" :as fi]

With 2.20.3 this works:

  (:require
    ["date-fns/locale/fi" :default fi]

#2207 seems to be the only change in 2.20.3.

[tan75]

hi @croraf

I checked the mentioned above versions of the locales and didn't find any changes to the export methods.
I looked into your sandbox example and it looks like the mix of require and import is causing issues as @fturmel has already mentioned.
The code can be fixed as below:

import { Calendar, dateFnsLocalizer } from 'react-big-calendar'
import format from 'date-fns/format'
import parse from 'date-fns/parse'
import startOfWeek from 'date-fns/startOfWeek'
import getDay from 'date-fns/getDay'
import enUS from 'date-fns/locale/en-US'
import de from 'date-fns/locale/de'

const locales = {
  'en-US': enUS,
  'de': de,
};
const localizer = dateFnsLocalizer({
  format,
  parse,
  startOfWeek,
  getDay,
  locales,
})

const MyCalendar = props => (
  <div>
    <Calendar
      style={{ height: 500, width: 500, margin: 'auto', }}
      localizer={localizer}
      culture='de'
      startAccessor="start"
      endAccessor="end"
      events={[]}
    />
  </div>
)

export default MyCalendar;

or:

import { Calendar, dateFnsLocalizer } from 'react-big-calendar'
import format from 'date-fns/format'
import parse from 'date-fns/parse'
import startOfWeek from 'date-fns/startOfWeek'
import getDay from 'date-fns/getDay'

const locales = {
  'en-US': require('date-fns/locale/en-US').default,
  'de': require('date-fns/locale/de').default,
};
const localizer = dateFnsLocalizer({
  format,
  parse,
  startOfWeek,
  getDay,
  locales,
})

const MyCalendar = props => (
  <div>
    <Calendar
      style={{ height: 500, width: 500, margin: 'auto', }}
      localizer={localizer}
      culture='de'
      startAccessor="start"
      endAccessor="end"
      events={[]}
    />
  </div>
)

export default MyCalendar;

Hope it helps!

[hoxu]

For the record, here is a diff between 2.20.2 and 2.20.3: https://github.com/date-fns/date-fns/compare/v2.20.2..v2.20.3

I don't really understand the changes, but something changed regarding the require/imports syntax needed with ClojureScript.

Not disputing the close, but just noting observations, in case someone finds those useful.

[kossnocorp]

@hoxu @tan75 I just got an idea how this came about. In this release, we fixed ESM to enable tree-shaking, and a side effect of it was that now bundlers (i.e., webpack) see ESM versions instead of CommonJS. That broke mixed usage of import and require. There's probably a Babel/TypeScript/etc. configuration that fixes it, but I recommend getting rid of require and use import.