Topic: Issues with plugins and MDB React 5

Lukasz S free asked 3 years ago


Hi, I have the Advanced version of React 5, as I'm using React and want to use plugins. However, I'm struggling to get them to work.

In my package.json, I have "mdb-calendar" installed from "/mdb/standard/plugins/prd/calendar" (as I believe the React version is not yet ready), and for the kit, I have "mdb-react-ui-kit" from "/mdb/react/mdb5/prd/mdb5-react-ui-kit-pro-essential". Not sure if that's the correct setup or not though.

In my React app, I'm trying to add the calendar, and I tried everything I could think of. The following code displays the calendar:

import React, { Component } from "react";

import Calendar from "mdb-calendar";

import * as mdb from "mdb-react-ui-kit"; // importing doesn't seem to help

import { MDBContainer } from "mdb-react-ui-kit";

const events = [
  {
    summary: "JS Conference",
    start: {
      date: Calendar.moment.format("DD/MM/YYYY"),
    },
    end: {
      date: Calendar.moment.format("DD/MM/YYYY"),
    },
    color: {
      background: "#1266F1",
      foreground: "white",
    },
  },
];

class CalendarContainer extends Component {
  componentDidMount() {
    window.mdb = mdb;
    const calendarElement = document.querySelector(".calendar");
    const calendarInstance = new Calendar(calendarElement);
    calendarInstance.next();
    calendarInstance.addEvents(events);
  }

  render() {
    return (
      <MDBContainer breakpoint="xxl">
        <div className="calendar mt-5" id="calendar"></div>
      </MDBContainer>
    );
  }
}

export default CalendarContainer;

However, the events are not displayed and clicking on anything causes an error:

TypeError: mdb.Modal is not a constructor
value
D:/Programming/x/node_modules/mdb-calendar/js/calendar.min.js:274

The issue seems to happen in componentDidMount() when I try to add events or the events get actioned.

componentDidMount
D:/Programming/x/src/components/main/calendar.js:31

  28 |    const calendarElement = document.querySelector(".calendar");
  29 |    const calendarInstance = new Calendar(calendarElement);
  30 |    calendarInstance.next();
> 31 |    calendarInstance.addEvents(events);
     | ^  32 |  }
  33 | 
  34 |  render() {

I tried a few different things, including starting an app from scratch just for the calendar, but still having no luck.

Can you please confirm if it's possible to make use of the calendar while using the MDB 5 React version? Please note, I'm interested in using multiple plugins in my current project, including WYSWIG, Drag and Drop, File Upload etc, so it's not just about the calendar.

Thanks for your help, Lukasz


Lukasz S free answered 3 years ago


Thanks, Krzysztof. All I can say to your team is - keep coding until they're live ;)

Pozdrawiam, Łukasz


Krzysztof Wilk staff commented 3 years ago

Glad to hear that. If you have more questions - feel free to ask :)

Keep coding!


Krzysztof Wilk staff answered 3 years ago


Hi!

This ETA is mainly for those two plugins I mentioned above. Anyway - all plugins you want to use should show up in about 2,5 - 3 months :)

Keep coding!


Lukasz S free answered 3 years ago


Hi,

Sounds good, thank you. Is this for all plugins (I'm also interested in drag and drop and file upload, among others), or for those two, and others might come later?

Either way, I'll think about my decision and might contact your accounts team separately.

Thank you for your help,

Lukasz


Krzysztof Wilk staff answered 3 years ago


Hi!

An ETA for those 2 plugins (I mean WYSIWYG and Calendar) is about 1,5 - 2 months.

Keep coding!


Lukasz S free answered 3 years ago


Hello Krzysztof,

Thank you for coming back to me, that's what I feared. That's quite unfortunate...

As mentioned, I'm interested in using a number of plugins like Calendar, WYSWIG, Drag and Drop and File Upload, as a minimum, in the project I'm working on. I'm currently in the proof of concept stage, so I don't need everything perfect and working at this stage. However, I'd like to make sure that the technologies I use will be able to allow me to complete the project.

Can you please let me know what the expected time of adding those (and potentially other) plugins to MDB5 React 5 is? I'm guessing that will be version 1.0 of the project, rather than one of the Beta versions. I'd like to know if I can wait until that time and use placeholders/replacements temporarily, or if I should migrate to Standard instead and just make the extra effort of creating my own components instead of using your pre-made ones.

Thank you for your help, Łukasz


Krzysztof Wilk staff answered 3 years ago


Hi!

I'm afraid it is not achievable to mix MDB5 React with Standard plugins. It is caused by environmental and languages differences.

Keep coding!



Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue

  • ForumUser: Free
  • Premium support: No
  • Technology: MDB React
  • MDB Version: MDB5 1.0.0-beta6
  • Device: Desktop
  • Browser: Chrome
  • OS: Windows 10
  • Provided sample code: No
  • Provided link: No