clone.localeData is not a function crash on calendar popover

[AsifDaum]

Checklist

• I've looked through the README
• I've verified that I am running react-big-schedule version 4.2.0 or above.
• I've searched the existing issues and discussions for a similar question
• I've provided relevant code snippets or error messages
• [] I've included steps to reproduce the issue
• I've checked the browser console for any errors
• I've tested the issue with the latest version of react-big-schedule

Please make sure the question is worded well enough to be understood

I am currently getting crashes when I try to open the calendar popover, I have set the locales as well according to the documentation but that didnt work and I have done it without it as well. It has been fairly temperamental because very rarely it did work fine, I cant recreate or remember what the situation was when it was working fine sadly.

I have noticed that it works fine in react-big-scheduler-stch, but it crashes the website in here, presumably because of the addition of dayjs, below is my code:

  const dispatch = useDispatch();

  const schedulerParentRef = useRef();
  var today = new Date();
  var date = today.getFullYear() + "-" + (today.getMonth() + 1) + "-" + today.getDate();
  let schedulerData = new SchedulerData(
    date,
    ViewType.Day, // Change the status of daily, weekly or monthly
    false,
    false,
    {
      eventItemPopoverPlacement: "bottomRightMousePosition",
      responsiveByParent: true,
      besidesWidth: window.innerWidth <= 1600 ? 100 : 350,
      startResizable: false,
      endResizable: false,
      schedulerContentHeight: "100%",
      weekResourceTableWidth: window.innerWidth * 0.1,
      dayResourceTableWidth: window.innerWidth * 0.1,
      monthResourceTableWidth: window.innerWidth * 0.1,
      yearResourceTableWidth: window.innerWidth * 0.1,
      weekCellWidth: 80,
      dayCellWidth: 40,
    }
  );
  schedulerData.setResources([]);
  schedulerData.setEvents([]);
  
    const prevClick = (schedulerData) => {
    schedulerData.prev();
    schedulerData.setEvents(Events);
    dispatch(setViewModel(schedulerData));
  };

  const nextClick = (schedulerData) => {
    schedulerData.next();
    schedulerData.setEvents(Events);
    dispatch(setViewModel(schedulerData));
  };

  const onViewChange = (schedulerData, view) => {
    schedulerData.setViewType(view.viewType, view.showAgenda, view.isEventPerspective);
    schedulerData.setEvents(Events);
    dispatch(setViewModel(schedulerData));
  };

  const onSelectDate = (schedulerData, date) => {
    schedulerData.setDate(date);
    schedulerData.setEvents(Events);
    dispatch(setViewModel(schedulerData));
  };


      <div className="w-full" ref={schedulerParentRef}>
      {displayTimeline && (
        <div className="-mt-4" style={{ marginLeft: "auto" }}>
          <Scheduler
            parentRef={schedulerParentRef}
            schedulerData={viewModel}
            prevClick={prevClick}
            nextClick={nextClick}
            onSelectDate={onSelectDate}
            onViewChange={onViewChange}
            eventItemClick={eventClicked}
            viewEventClick={ops1}
            viewEventText="Details"
          />
        </div>
      )}
  

Below is the crash error:

What would I have done incorrectly here? Any help is appreciated.

[ansulagrawal]

Hi @AsifDaum thank you for trying and using our library.

Can you share your package.json file

[AsifDaum]

Thank you for responding, below is the complete package.json file:

{
  "name": "stepsapi",
  "version": "0.1.1",
  "private": true,
  "dependencies": {
    "@craco/craco": "^6.4.3",
    "@headlessui/react": "^1.4.3",
    "@heroicons/react": "^1.0.5",
    "@react-three/drei": "^9.79.4",
    "@reduxjs/toolkit": "^1.8.5",
    "@stripe/react-stripe-js": "^1.7.0",
    "@stripe/stripe-js": "^1.22.0",
    "@testing-library/jest-dom": "^5.11.4",
    "@testing-library/react": "^11.1.0",
    "@testing-library/user-event": "^12.1.10",
    "@xeger/quill-image-actions": "^0.7.1",
    "@xeger/quill-image-formats": "^0.7.1",
    "@zxing/library": "^0.20.0",
    "animate.css": "^4.1.1",
    "apexcharts": "^3.35.3",
    "autoprefixer": "9",
    "axios": "^0.21.1",
    "connected-react-router": "^6.8.0",
    "country-state-city": "2.2.0",
    "file-saver": "^2.0.5",
    "formik": "^2.2.9",
    "history": "^5.2.0",
    "pigeon-maps": "^0.21.0",
    "postcss": "7",
    "qrcode.react": "^3.1.0",
    "react": "^18.0.2",
    "react-apexcharts": "^1.4.0",
    "react-big-schedule": "^4.2.5",
    "react-calendar": "^3.7.0",
    "react-circular-progressbar": "^2.0.4",
    "react-cookies": "^0.1.1",
    "react-dnd": "14.0.5",
    "react-dnd-html5-backend": "14.0.1",
    "react-dom": "^18.0.2",
    "react-facebook-login": "^4.1.1",
    "react-flow-renderer": "^9.1.2",
    "react-google-login": "^5.2.2",
    "react-icons": "^4.3.1",
    "react-image-gallery": "^1.2.8",
    "react-quill": "^2.0.0",
    "react-redux": "^7.2.2",
    "react-router-dom": "^6.2.1",
    "react-router-redux": "^4.0.8",
    "react-s3": "^1.3.1",
    "react-scripts": "4.0.1",
    "react-select": "^5.5.0",
    "react-stripe-checkout": "^2.6.3",
    "react-table": "^7.7.0",
    "react-three-fiber": "^6.0.13",
    "redux-saga": "^1.1.3",
    "sweetalert2": "^11.3.3",
    "tailwindcss": "npm:@tailwindcss/postcss7-compat",
    "three": "0.124.0",
    "tw-elements": "^1.0.0-alpha13",
    "typescript": "^4.9.5",
    "web-vitals": "^0.2.4",
    "xlsx": "^0.18.5",
    "yup": "^0.32.11"
  },
  "scripts": {
    "start": "craco  start --openssl-legacy-provider",
    "build": "GENERATE_SOURCEMAP=false CLIENT_ENV=production craco build",
    "test": "craco test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "@types/react-router-dom": "^5.1.7"
  }
}

[ansulagrawal]

Please install antd and dayjs and try it will solve your problem

[AsifDaum]

Same issue, it sadly didnt help.

[ansulagrawal]

Can you try to create same issue in code sandbox

[AsifDaum]

When I recreated it in codesandbox, I was unable to get it to crash.

https://codesandbox.io/s/inspiring-visvesvaraya-mm897m?file=/src/App.js

It didnt need Dayjs nor antd in those codesandboxes either. I'll investigate it more, is there anything I should look for in particular?

[ansulagrawal]

Which node version are you using

[AsifDaum]

I am currently using v18.17.1

[santiago0001]

instalando rc-picker se soluciona. La libreria internamente usa "rc-picker" , no te viene instalado porque podes no usarlo al desplegable. Instalando rc-picker se me soluciono