Our powerful JS Calendar component


Post by tokytok »

Hi,
I'm trying to import BryntumCalendar on my app.
My app is a create-react-app with react 16.3.1 (same version of the example).
The exemple work find but when I try to import it to my app I have this error :

My import steps :

  • Install and build the example react calendar

  • Copy/Paste @bryntum/calendar-react, @bryntum/demo-resources, bryntum-calendar from node-module (in the example project) to my code source

  • Add them in my package.json

    {
      ...
      "dependencies": {
        ...
        "@bryntum/calendar-react": "file:src/components/@bryntum/calendar-react",
        "@bryntum/demo-resources": "file:src/components/@bryntum/demo-resources",
        "bryntum-calendar": "file:src/components/@bryntum/bryntum-calendar",
        ...
        }
    }
    
  • Add a component CalendarBryntum like the App example :

    import React, { Fragment, useRef } from "react";
    import { BryntumCalendar } from "@bryntum/calendar-react";
    //import "./Calendar.scss";
    
    const CalendarBryntum = (props) => {
        const calendar = useRef(null);
        return (
            <Fragment>
                <BryntumCalendar
                    ref={calendar}
                    crudManager={{
                        autoLoad: false,
                    }}
                    eventColor={null}
                    eventEditFeature={{
                        items: {
                            location: {
                                type: "text",
                                name: "location",
                                label: "Location",
                                dataset: { eventType: "Meeting" }
                            }
                        }
                    }}
                    date={new Date(2020, 1, 6)}
                    modes={{
                        year: false
                    }}
                ></BryntumCalendar>
            </Fragment>
        );
    };
    
    export default CalendarBryntum;
    

    This is the error :
    Image

    Could you help me please ?


Post by mats »

We could not reproduce this issue. To assist you with your question, please provide more details including a runnable test case (as described in our support guidelines).

To get the fastest possible support, provide a simple test case based on our standard examples.


Post by tokytok »

This is an exemple with a new create-react-app :
https://storage.googleapis.com/dev-sportigo/public/bryntum.zip

Same problem : Cannot read property 'destroy' of undefined


Post by pmiklashevich »

Hello,

There is an issue in react 17. It cannot compile scss styles outside the src folder. You might have seen this error or similar:

Failed to compile.

./src/App.scss (./node_modules/css-loader/dist/cjs.js??ref--5-oneOf-6-1!./node_modules/postcss-loader/src??postcss!./node_modules/resolve-url-loader??ref--5-oneOf-6-3!./node_modules/sass-loader/dist/cjs.js??ref--5-oneOf-6-4!./src/App.scss)
Module not found: You attempted to import ../../../../../../build/calendar.material.css which falls outside of the project src/ directory. Relative imports outside of src/ are not supported.

But the thing is that the library should not be under src. Instead you need to go to the calendar/build folder and run "npm pack .". This command will create a tgz file, for example bryntum-calendar-4.0.3.tgz. So in the package.json file just need to use it as a target path. For example:

  "dependencies": {
    "bryntum-calendar": "file:../../../../../build/bryntum-calendar-4.0.3.tgz",

You can omit the demo styles, but theme is required!
If you don't want to import App.scss file, you can import the theme in App.js:

import "bryntum-calendar/calendar.material.css";

This is the ticket to create a React 17 example:
https://github.com/bryntum/support/issues/1823

Cheers,
Pavel

Pavlo Miklashevych
Sr. Frontend Developer


Post by tokytok »

It's not the same bug. I tried React 16.3.1and I have the same issue.
Do you need an other exemple case ?


Post by pmiklashevich »

The error you see is due to the missing theme. If you get the filtering demo (Calendar/examples/frameworks/react/javascript/filtering) up and running and comment out the theme (calendar.material.css) you'll get exactly the same error you described in the first post. If you think that this is not the case, please apply minimal changes to our demo, then zip it up and attach here (excluding libs and node modules). We will investigate. Thanks!

Pavlo Miklashevych
Sr. Frontend Developer


Post Reply