Im using in my project webpack with uglifyjs-webpack-plugin and when i build my project it dosnt work, ow can i resolve tis proble or maybe you can give advice which plugin can compress Bryntum Scheduler without errors?
Support Forum
When im using uglifyjs-webpack-plugin for my webpack build and try to run te app, i get error like "cant get instance of undefined". I think its comes from scheduler.current.instance, but anyway if i build my app without uglifyjs-webpack-plugin its works, so problem happend when uglifyjs-webpack-plugin try to compress Bryntum Scheduler plugin.
import React, { useState, useRef, useEffect } from 'react';
import { BryntumScheduler } from '@bryntum/scheduler-react';
import { format } from 'date-fns'
import { DragHelper, PresetManager, Toast, EventModel, LocaleManager, DateHelper, StringHelper, ResourceTimeRangeModel, RecurringTimeSpan, RecurringTimeSpansMixin, ResourceTimeRangeStore } from '@bryntum/scheduler/scheduler.umd.js'
import "@bryntum/scheduler/scheduler.classic-light.css";
const Scheduler = () => {
const roundDate = (date) => {
const newMin = Math.round(date.getMinutes() / 10) * 10;
return new Date(date).setMinutes(newMin);
}
const scheduler = useRef();
const resources = [
{ id: 'r1', name: 'Mike' },
{ id: 'r2', name: 'Linda' },
{ id: 'r3', name: 'Don' },
{ id: 'r4', name: 'Karen' },
{ id: 'r5', name: 'Doug' },
{ id: 'r6', name: 'Peter' },
{ id: 'r7', name: 'Sam' },
{ id: 'r8', name: 'Melissa' },
{ id: 'r9', name: 'John' },
{ id: 'r10', name: 'Ellen' },
];
const events = [
{
"id": 1,
"resourceId": "r1",
"startDate": new Date("2018-08-24T10:00:00"),
"endDate": new Date("2018-08-24T19:00:00"),
"name": "Meeting 1",
"eventColor": "blue",
"resizable": false,
"agenda": [
{
"name": "",
color: "green",
"startOffset": 0,
"endOffset": 4*60*60*1000,
},
{
"name": "",
color: "blue",
"startOffset": 4*60*60*1000,
"endOffset": 5*60*60*1000
},
{
"name": "",
color: "red",
"startOffset": 5*60*60*1000,
"endOffset": 9*60*60*1000
}
]
},
{
"id": "r2",
"isMain": true,
"resourceId": 811655651 ,
"startDate": new Date(new Date("2018-09-24T10:00:00").getTime() + 3600000),
"endDate": new Date(new Date("2018-09-24T19:00:00").getTime() + 3600000),
"name": "Meeting",
"eventColor": "blue",
"draggable": false,
"resizable": false,
"agenda": [
{
"name": "",
color: "yellow",
"startOffset": 0,
"endOffset": 4*60*60*1000,
},
{
"name": "",
color: "blue",
"startOffset": 4*60*60*1000,
"endOffset": 5*60*60*1000
},
{
"name": "",
color: "yellow",
"startOffset": 5*60*60*1000,
"endOffset": 9*60*60*1000
}
]
},
{
"id": "r3",
"resizable": false,
"resourceId": 811655651,
"startDate": new Date("2018-09-24T10:00:00"),
"endDate": new Date("2018-09-24T19:00:00"),
"name": "Meeting 2",
"eventColor": "blue",
"agenda": [
{
"name": "",
color: "yellow",
"startOffset": 0,
"endOffset": 4*60*60*1000,
},
{
"name": "",
color: "blue",
"startOffset": 4*60*60*1000,
"endOffset": 5*60*60*1000
},
{
"name": "",
color: "red",
"startOffset": 5*60*60*1000,
"endOffset": 9*60*60*1000
}
]
},
];
return (
<div>
<div>
<BryntumScheduler
ref={scheduler}
resources={resources}
events={events}
minHeight='70vh'
maxHeight='70vh'
eventBodyTemplate={values => values.map((value, index, arr) => {
const isCurrent = value.isCurrent;
return `
<div class="nested" data-ms="${value.msInPx}" data-start="${value.start}" data-end="${value.end}" data-index="${index}" data-id="${value.id}" style=";left: ${value.left}px;width: ${value.width}px;background-color: ${value.color}; z-index: ${index * -1}">
${StringHelper.encodeHtml(value.name)}
${index === 0 ? `<div class="resizer left main"></div><div style="opacity: ${isCurrent ? 1 : 0}" class="timer left">${format(roundDate(new Date(value.startDate)), "HH:mm")}</div>` : ""}
<div class="resizer ${index === arr.length - 1 ? "main" : ""}"></div>
${index === arr.length - 1
? `<div style="opacity: ${isCurrent ? 1 : 0}" class="timer">${format(roundDate(new Date(value.endDate)), "HH:mm")}</div>`
: `<div style="opacity: ${isCurrent ? 1 : 0}" class="timer">${format(roundDate(new Date(new Date(value.startDate).getTime() + value.end)), "HH:mm")}</div>`
}
</div>
`
}).join('')}
eventRenderer={function({ eventRecord, renderData }) {
const msInPx = (new Date(scheduler.current.instance.endDate).getTime() - new Date(scheduler.current.instance.startDate).getTime()) / scheduler.current.instance.getTimeSpanDistance(new Date(scheduler.current.instance.startDate), new Date(scheduler.current.instance.endDate));
renderData.wrapperCls[`event${eventRecord.id}`] = true;
if(eventRecord.hasCollision){
renderData.wrapperCls.collision = true;
}
if(eventRecord.data.isMain){
renderData.wrapperCls.main = true;
renderData.height = 15;
}
let prevWidth = 0;
return (eventRecord.agenda || [eventRecord]).map((nestedEvent, index, arr) => {
const width = (nestedEvent.endOffset - nestedEvent.startOffset) / msInPx;
const obj = {
left : prevWidth,
width,
id: eventRecord.id,
name : nestedEvent.name,
color: nestedEvent.color,
isLast: index === arr.length - 1,
start: nestedEvent.startOffset,
end: nestedEvent.endOffset,
isMain: eventRecord.data.isMain,
startDate: eventRecord.startProxy || eventRecord.startDate,
endDate: eventRecord.endProxy || eventRecord.endDate,
isCurrent: eventRecord.isCurrent,
msInPx,
}
prevWidth += width
return obj;
});
}}
startDate={new Date(2017, 0, 1, 6)}
endDate={new Date(2017, 0, 1, 20)}
columns={[{ text: 'Name', field: 'name', width: 130 }]}
/>
</div>
</div>
);
}
export default Scheduler;
Example like tis is okay?
Hi R4tm4n,
We should be able to run a test case and reproduce the issue. So, please, delete node_modules
and zip the entire app. The app should be as simple as it possible to replicate the problem. The easiest way is to apply required changes to one of our examples and attach it here.
All the best,
Alex
Hi, R4tm4n!
Please make sure if you extend any of Bryntum widgets in your code you have static $name
getter for the class.
This is mandatory for minification or uglification.
https://www.bryntum.com/docs/scheduler/#Core/widget/Widget#property-$name-static
Something like this:
class MyNewClass extends Widget {
static get $name() {
return 'MyNewClass';
}
}
Talking of the error you have it is really hard to say without having of the code.
Please try to debug the code at the line where you get this error.
Or may be you could take one of our simple demos from distribution zip and config it with your webpack setup then attach it here so we can see the problem.