TypeError: Cannot read property 'resourceAreaWidth' of undefined Fullcalendar

Question

I have this react component

import React from 'react'
import FullCalendar from '@fullcalendar/react'
import dayGridPlugin from '@fullcalendar/daygrid'
import timeGridPlugin from '@fullcalendar/timegrid'
import interactionPlugin from '@fullcalendar/interaction'
import resourceTimelinePlugin from '@fullcalendar/resource-timeline'
// import { Calendar } from '@fullcalendar/core'
import './calendar.scss'

const TempCalendar = () => {
  return (
    <FullCalendar
      plugins={[resourceTimelinePlugin, dayGridPlugin, timeGridPlugin, interactionPlugin]}
      timeZone="UTC"
      schedulerLicenseKey= 'CC-Attribution-NonCommercial-NoDerivatives'
      initialView="resourceTimelineDay"
      headerToolbar={{
        left: 'prev,next',
        center: 'title',
        right: 'resourceTimelineDay,resourceTimelineWeek,resourceTimelineMonth',
      }}
      editable
      resourceAreaHeaderContent="Rooms"
      resources="https://fullcalendar.io/demo-resources.json?with-nesting&with-colors"
      events="https://fullcalendar.io/demo-events.json?single-day&for-resource-timeline"
    />
  )
}
export default TempCalendar

I want to recreate this demo or this demo but as a react component. Above is the code I've written but I'm getting this error

Here is my package.json

"dependencies": {
    "@amcharts/amcharts4": "^4.9.23",
    "@ant-design/icons": "^4.0.3",
    "@apollo/react-hooks": "^3.1.3",
    "@fortawesome/fontawesome-svg-core": "^1.2.30",
    "@fortawesome/free-solid-svg-icons": "^5.14.0",
    "@fortawesome/react-fontawesome": "^0.1.11",
    "@fullcalendar/core": "^5.5.0",
    "@fullcalendar/daygrid": "^5.5.0",
    "@fullcalendar/interaction": "^5.4.0",
    "@fullcalendar/react": "^5.4.0",
    "@fullcalendar/resource-common": "^5.5.0",
    "@fullcalendar/resource-daygrid": "^5.5.0",
    "@fullcalendar/resource-timegrid": "^5.5.0",
    "@fullcalendar/resource-timeline": "^5.5.0",
    "@fullcalendar/timegrid": "^5.5.0",
    "@fullcalendar/timeline": "^5.5.0",
      "react": "^16.8.6",
]

I don't know what I am doing wrong or is that a full calendar bug. Pls guide me

Answer 1

Downgrading all versions of @fullcalendar to v5.1.0 fixed it for me

Answer 2

For me, the solution was to make sure that all of my @fullcalendar packages were the same version in my package.json file. Just using npm install or yarn add can lead to a newer version of a @fullcalendar package being installed, leading to a mismatching of versions between the between some @fullcalendar packages. As you can see from your package.json file, some of your @fullcalendar packages are v5.5.0 while others are v5.4.0. To fix this I manually changed the version number in my package.json file and then reinstalled all the dependencies of my project.