React-big-calendar: Fix: Attempted import error: does not contain a default export

Created on 21 Jun 2019 · 15Comments · Source: jquense/react-big-calendar

hi, I'm working with react typescript and mi code is this:
import React from 'react';
import BigCalendar from 'react-big-calendar';
import Moment from 'moment';
import Eventos from '../calendario/Evento';
import 'react-big-calendar/lib/sass/styles.scss';

Moment.locale('es');
const Localizador = BigCalendar.momentLocalizer(Moment);

function ComponenteCalendario() {

return (

events = {Eventos}
localizer = {Localizador}
defaultView = {BigCalendar.Views.MONTH}
defaultDate = {new Date(2015,3,1)}
views = {{month:true, week:true}}
/>

</div>

);
}

export default ComponenteCalendario;

but this give me the next error:

Failed to compile.

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

wontfix

Source

EduardoCaseros

👍8

Most helpful comment

If there has been such an important update to the underlying API that BigCalendar isn't even a default entity that is exported, then this needs to be made pretty clear in the documentation and examples.

I have gotten a basic working example: https://stackblitz.com/edit/big-calendar-demo?file=index.js

Even though I'm importing the CSS at the top, the new issue seems to be that the month view is not showing anything. The other views seem to show various events.

Edit: Looks like the CSS is fine, but the div containing the <Calendar/> needs to be given a height. This should be documented on the Getting Started page.

shahzeb1 on 1 Jul 2019

🎉7 👀1

All 15 comments

Api is changed in the latest version
https://github.com/intljusticemission/react-big-calendar/blob/master/CHANGELOG.md#breaking-change

TrySound on 21 Jun 2019

👍2

I encountered the same issue.

@TrySound

I checked the link, but...

import {
  Calendar,
  DateLocalizer,
  momentLocalizer,
  globalizeLocalizer,
  move,
  Views,
  Navigate,
  components,
} from 'react-big-calendar'

...there is no BigCalendar in the list.
Does that mean we should use Calendar instead?

If so, however, importing Calendar results in "Attempted import error: 'react-big-calendar' does not contain a default export (imported as 'Calendar').";

This is caused by
import {Calendar} from 'react-big-calendar'
or
import Calendar from 'react-big-calendar'.

I'm using Typescript, which might have something to do this error

(Typescript version: 3.4.2)

Hiroki111 on 22 Jun 2019

👍1

@TrySound

I've made a runnable, minimum example for this issue with create-react-app.

https://github.com/Hiroki111/bigcalendar-test

I don't know if this helpful, but the error should be confirmed by downloading and running it by yarn install and yarn start.

Hiroki111 on 22 Jun 2019

Perhaps you have old typescript typings (0.20.20) while this project is (^0.22.0). As I said this project does not provide types and not support external ones.

TrySound on 22 Jun 2019

@TrySound

Thank you for your comment, but...

Screenshot from 2019-06-23 08-02-40

Perhaps you have old typescript typings (0.20.20) while this project is (^0.22.0)

Is 0.20.20 an old version?
I'm not sure if we have version 0.22.0 of @types

Hiroki111 on 23 Jun 2019

Submit PR to definitely typed or copy to your project and change them. We do not support these types.

TrySound on 23 Jun 2019

I have gotten a basic working example: https://stackblitz.com/edit/big-calendar-demo?file=index.js

Even though I'm importing the CSS at the top, the new issue seems to be that the month view is not showing anything. The other views seem to show various events.

Edit: Looks like the CSS is fine, but the div containing the <Calendar/> needs to be given a height. This should be documented on the Getting Started page.

shahzeb1 on 1 Jul 2019

🎉7 👀1

How this can be cleaner? Information that it was default previously has a place in changelog.

TrySound on 1 Jul 2019

👍1

Well at least in my example, the <Calendar> needed to be wrapped in a <div> of height 300pt. Without a declared height, the month view breaks.

And I know that there is updated code that is trickled throughout this repo, but maybe it would be higher priority to update the front page of the website as it still shows dated code:

And if you need PR's to help update the demo / example code, please let me know. I'll gladly contribute.

shahzeb1 on 1 Jul 2019

I think I confused your highlighted message with blaming module exports.

If there has been such an important update to the underlying API that BigCalendar isn't even a default entity that is exported, then this needs to be made pretty clear in the documentation and examples.

TrySound on 1 Jul 2019

And sure all fixes are appreciated.

TrySound on 1 Jul 2019

I see. I could've been more clear. I think since places here on the repo and on the demo site are still using BigCalendar, this was the only issue I stumbled across on Google which pointed me to the new change.

Will help note locations that could be updated and then create a PR.

shahzeb1 on 1 Jul 2019

Ah, I missed this when I did this change.

TrySound on 1 Jul 2019

@TrySound

I've made a runnable, minimum example for this issue with create-react-app.

https://github.com/Hiroki111/bigcalendar-test

I don't know if this helpful, but the error should be confirmed by downloading and running it by yarn install and yarn start.

your app test have same error about (imported as 'BigCalendar').

buidhui on 21 Aug 2019

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.