Uncaught TypeError: t is not a function

[mncarbajal]

Hi! i have the next simple config :

const React = require("react");
const { Calendar, momentLocalizer } = require('react-big-calendar');
const moment = require('moment')
const localizer = momentLocalizer(moment)

const ReportCalendar = ({ eventList }) => {
    return <Calendar
        localizer={localizer}
        events={eventList}
        startAccessor="start"
        endAccessor="end"
        style={{ height: "550px", width: '850px' }}
    />
}
module.exports = ReportCalendar

my events are :

[
  {
    "start": "2020-05-11T03:00:00.000Z",
    "end": "2020-05-12T02:59:59.999Z",
    "title": " "
  }
]

in the local running its be allright, but in amazon server, in production model when i click on week

i can see that

can you help me please ?

i have "react-big-calendar": "0.24.5" version

https://imgur.com/qdNcqH5

[Georift]

Hey there, what format at the events dates in? This library expects them to be passed in as date objects. If I pass in the event you pasted:

const events = [
  {
    "start": "2020-05-11T03:00:00.000Z",
    "end": "2020-05-12T02:59:59.999Z",
    "title": " "
  }
]

To your example component I get an error however:

const events = [
  {
    start: moment("2020-05-11T03:00:00.000Z").toDate(),
    end: moment("2020-05-12T02:59:59.999Z").toDate(),
    title: " "
  }
];

Works great.

[mncarbajal]

Sorry, that was so because I did it with console.log and JSON.stringify, but it actually looks like this...(whit console.log(object))

really, i use this ...

const events = [
  {
    start: moment("2020-05-11T03:00:00.000Z").toDate(),
    end: moment("2020-05-12T02:59:59.999Z").toDate(),
    title: " "
  }
];

not yet work...

This is really rare, because it works wonderfully locally, but in production it breaks

[Georift]

Could you share the repository you're having this issue in, or perhaps a smaller reproduction?

[mncarbajal]

i have working in a company and the repo is private ! can i contact you and show you my code ?

[mncarbajal]

i get this this data from some api...

[
  {
    "next_closing_time": "2020-05-11T00:00:00.000-0300",
    "next_opening_time": "2020-05-11T05:00:00.000-0300"
  },
  {
    "next_closing_time": "2020-05-11T22:00:00.000-0300",
    "next_opening_time": "2020-05-12T05:00:00.000-0300"
  },
  {
    "next_closing_time": "2020-05-12T22:00:00.000-0300",
    "next_opening_time": "2020-05-13T05:00:00.000-0300"
  },
  {
    "next_closing_time": "2020-05-13T22:00:00.000-0300",
    "next_opening_time": "2020-05-14T05:00:00.000-0300"
  },
  {
    "next_closing_time": "2020-05-14T22:00:00.000-0300",
    "next_opening_time": "2020-05-15T05:00:00.000-0300"
  },
  {
    "next_closing_time": "2020-05-15T22:00:00.000-0300",
    "next_opening_time": "2020-05-18T05:00:00.000-0300"
  }
]

i convert this data with the next function :

const convertReportList = (list) => {

    let response = []
    list.forEach((value, index) => {
        if (index !== 0) {
            let aux = {
                start: new Date(moment(list[index - 1]['next_opening_time'])),//getting  date from the before data
                end: new Date(moment(new Date(value['next_closing_time']).getTime() - 1)),//on the complete day, with -1, i can get some like "2020-05-14T23:59:99.999-0300
            }
            let title = ''
            Object.keys(value).map(v => {
                title = `${title} ${v}: ${value[v]}`
            })
            aux = { ...aux, title };
            response.push(aux);
        }
    })
    return response;
}

so, i get some like ...

And finally, the calendar implements ...

const React = require("react");
const { Calendar, momentLocalizer, Views } = require('react-big-calendar');
const { useEffect, useState } = React
const moment = require('moment')
const localizer = momentLocalizer(moment)

const ReportCalendar = ({ eventList }) => {

    const [events, setEvents] = useState([])
    useEffect(() => {
        setEvents(eventList)
    }, [eventList])

    return (<Calendar
        views={[Views.WEEK, Views.DAY, Views.AGENDA]}
        defaultView={Views.WEEK}
        localizer={localizer}
        events={events}
        startAccessor="start"
        endAccessor="end"
        style={{ height: "550px", width: '850px' }}
    />)
}
module.exports = ReportCalendar

THE ERROR IS ON PRODUCTION ENVIRONENT, THIS WORK LOCALLY !

[Georift]

Can you share a link to the production build? Might be able to debug from there.

[mncarbajal]

it's a company internal page, you couldn't into to the page, its working with a own vpn, i would have not problem to share this, but it is private. How we can do it ?

[inigoreiriz]

I have the same exact issue. The calendar works perfectly in my local environment, but not in a production environment, I get the same error. Did you solve it somehow?

[Dipesh1999]

any updates on this issue?

[chupapee]

Just add the title prop to custom view component:

function Day() {
  return (...)
}

Day.title = () => ('some text for title')

function Component() {
  return (
    <Calendar
      ...
      views={{
        week: true,
        month: true,
        day: Day,
      }}
      ...
  />
  )
}

[rk111]

showing same error on aws prod server