CODEWITHSUNDEEP
javascriptreactjsreact-big-calendar
Franck Bigand
Franck Bigand

Reputation: 182

React big calendar has no default export

I wanted to use react-big-calendar, I installed the package with npm (version 0.28.0), but I was able to use the component because there is apparently no default export. The exact error is

Attempted import error: 'react-big-calendar' does not contain a default export (imported as 'BigCalendar').

If I should not use default export, I did not find anywhere what I should import instead. I used this tutorial in order to make it work. I searched on the internet for similar issue, but I did not find anything that provide a solution. My code so far is very minimalist, since I was not able to start anything

import BigCalendar from 'react-big-calendar'
import moment from 'moment'

const MyComponent = props => {
  const localizer = BigCalendar.momentLocalizer(moment)
  return(
    <div>
      <BigCalendar localizer={localizer}/>
    <div>
  )
}

Thank you in advance for any response.

Upvotes: 3

Views: 5994

Answers (3)

Mohak Londhe
Mohak Londhe

Reputation: 392

npm install --save @types/react-big-calendar

Upvotes: 0

twboc
twboc

Reputation: 1607

You should use named exports provided by the library. Additionally library exports Calendar component which should replace your BigCalendar default import.

import { Calendar, momentLocalizer } from 'react-big-calendar'
import moment from 'moment'

const MyComponent = props => {
  const localizer = momentLocalizer(moment)
  return(
    <div>
      <Calendar localizer={localizer}/>
    <div>
  )
}

Upvotes: 3

Rene Polo
Rene Polo

Reputation: 831

I will suggest you to try this out.

// the imports
import { Calendar, momentLocalizer  } from 'react-big-calendar' 
import 'react-big-calendar/lib/css/react-big-calendar.css';
import moment from 'moment'
const localizer = momentLocalizer(moment)

// The component you should use instead the one you mentioned.
 <Calendar localizer={localizer} />

let me know if that works for you, I remember having the same issue and I solved by doing this.

Best regards, I hope it helps!

Upvotes: 10

Related Questions