Unable to find solution – showing error in this way – "Attempted import error: 'date-fns' does not contain a default export (imported as 'dateFns')."

I’m new to reactjs.
I want to create a calendar which accepts an event for a particular date.
A small example can be found here

However, when I want to see the output, it outputs Attempted import error: 'date-fns' does not contain a default export (imported as 'dateFns').

Can anyone assist me here to resolve the error?

After importing in this way – import addMonths from ‘date-fns/addMonths*

I’m getting error as shown in snapshot. Snapshot

Can anybody help me in this?

16 thoughts on “Unable to find solution – showing error in this way – "Attempted import error: 'date-fns' does not contain a default export (imported as 'dateFns')."”

  1. If you have a look at the date-fns documentation, the api has been updated since this article was written.

    Rather than a single default export

    import dateFns from "date-fns";

    You want to import each of the functions used individually.

    so for…

    const nextMonth = () => {
       setCurrentDate(dateFns.addMonths(currentDate, 1));
    }
    const prevMonth = () => {
       setCurrentDate(dateFns.subMonths(currentDate, 1));
    }
    

    You would need to import each function idnividually

    import addMonths from 'date-fns/addMonths'
    import subMonths from 'date-fns/subMonths'
    

    Then change the implementation to remove the dateFns object. So…

    const nextMonth = () => {
       setCurrentDate(addMonths(currentDate, 1));
    }
    const prevMonth = () => {
       setCurrentDate(subMonths(currentDate, 1));
    }
    

    Here are the date-fns docs https://date-fns.org/v2.9.0/docs/Getting-Started

    Reply

Leave a Comment