How to import date-fns properly?

[nihalkurki]

I'm having some difficulty implementing the date-fns library. When I try and import date-fns only, I get the following error:
Attempted import error: 'date-fns' does not contain a default export (imported as 'dateFns').
And when I try to import all the functions I need individually I get this error:
Attempted import error: 'addDays' is not exported from 'date-fns/addDays'.
When I try to delete the import for addDays, the error comes up for a new method and so on and so forth. The question I'm trying to ask is how do I fix these errors to display a working calendar so I can add appointments to each date and so on?

[kossnocorp]

Please provide a complete code snippet that causes the error and the library version.

[nihalkurki]

https://github.com/moodydev/react-calendar/blob/5e8e2295af3951b424d1276bd9edaa88c8f3ef61/src/components/Calendar.jsx#L1

That was the code of the tutorial I was following to try and create a calendar

[kossnocorp]

You did not provide what I was asking. This very code could not cause the error that you cited in the original message.

Please provide here the code that causes the error and the package version you have installed.

[nihalkurki]

My code is exactly the same, except I have the following in the import lines:

import { addMonths } from 'date-fns/addMonths'
import { subMonths } from 'date-fns/subMonths'
import { startOfWeek } from 'date-fns/startOfWeek'
import { endOfWeek } from 'date-fns/endOfWeek'
import { startOfMonth } from 'date-fns/startOfMonth'
import { endOfMonth } from 'date-fns/endOfMonth'
import { isSameDay } from 'date-fns/isSameDay'
import { isSameMonth } from 'date-fns/isSameMonth'
import { addDays } from 'date-fns/addDays'

Also I am on version 2.14

[kossnocorp]

That's not the definition of "the same" 😂 When you debug, such "small" details make all the difference.

You should either import functions as default:

import addMonths from 'date-fns/addMonths'
import subMonths from 'date-fns/subMonths'
import startOfWeek from 'date-fns/startOfWeek'
import endOfWeek from 'date-fns/endOfWeek'
// ...

...or import them from the root package:

import { addMonths, subMonths, startOfWeek, endOfWeek } from 'date-fns'

[nihalkurki]

So I shouldn't use the -- import dateFns from "date-fns"; --, I should import individual methods?

Because when I try to do that I lose the dateFns object that I can use to call format or parse methods on and receive the following errors:

'format' is not defined no-undef
'parse' is not defined no-undef

[nihalkurki]

What used to be {dateFns.format(addDays(startDate, i), dateFormat)} now becomes

{format(addDays(startDate, i), dateFormat)} without the dateFns import

[kossnocorp]

I recommend you to import individual methods because when you import the library as import dateFns from 'date-fns' you import all the functionality that you don't need, and this bloats the build size.

[totymedli]

If you use ES modules (.mjs files) you have to write it this way: import format from 'date-fns/format/index.js'