Our pure JavaScript Scheduler component


[REACT] error when trying to display scheduler in vertical mode

Post Reply

Post by adam.pilacki »

I'm getting the error:

TypeError: Cannot read property 'on' of undefined
at ResourceHeader.set resourceStore [as resourceStore] (scheduler.module.js:111136)
at VerticalEventMapper.set resourceStore [as resourceStore] (scheduler.module.js:110108)
at VerticalEventMapper.onChangeResourceStore (scheduler.module.js:110133)
at Scheduler.trigger (scheduler.module.js:3615)
at eval (scheduler.module.js:3628)
at Array.forEach (<anonymous>)
at ResourceStore.trigger (scheduler.module.js:3624)
at ResourceStore.loadData (scheduler.module.js:33997)
at ResourceStore.set data [as data] (scheduler.module.js:33883)
at Scheduler.set resources [as resources] (scheduler.module.js:105944)

The error occurs in componentDidUpdate when this code is called:

if (prevProps.resourcesVersion !== props.resourcesVersion) {
  engine.resources = props.resources;
}

This happens if 'listeners' is NOT passed as prop to BryntumScheduler component.

IF 'listeners' is passed as prop though, then vertical view is working back again BUT horizontal mode is broken:
some listeners are called, others not and contents behind the viewport are not rendered (scrolling horizontally reveals empty grid).

Here is the listeners object being passed to horizontal and vertical views/modes:

{
  beforeEventSave: ({ eventRecord, values }) => {
    // the code here...
  },
  beforeEventEditShow: ({ eventRecord, resourceRecord, editor }) => {
    // the code here...
  },
  beforeEventDelete: async ({ eventRecords, source }) => {
    // the code here...
  },
  afterEventDrop: async ({ eventRecords, valid }) => {
   // the code here...
  },
  eventResizeEnd: async ({ changed, eventRecord }) => {
    // the code here...
  }
}

I do not want to replace/remove all schedulers. I want to replace/set ONLY the above 5 listeners and leave others as they are defined by default in scheduler module.

Post by mats »

How do we reproduce this? Can you please upload a simple test case?

Post by adam.pilacki »

Thanks for the response.
Actually I was able to resolve it by using scheduler-3.1.4 and using BryntumScheduler component found in scheduler-3.1.4 package (and then did additional modifications necessary for my app).
I spent some time checking various versions (from 3.0.0 to 3.1.5) and various BryntumScheduler delivered in the packages - finally, I found the solution for my app.
Difficult to say what was the reason.
Probably one of the settings was causing instability.
Or maybe one of the methods called inside old BryntumScheduler component was setting something incompatible way and then appending resources was causing an error - difficult to say.
Anyway - now scheduler works in my app :)

BUT along the way, I found an issue with VerticalMapper in 3.1.5 package:
To reproduce:

  1. go to: ./examples/react/typescript/basic
  2. npm install and then npm start (the app starts working correctly)
  3. Edit App.tsx and set the mode to vertical for scheduler: 
    <BryntumScheduler
...
mode={'vertical'}
...
/>
  4. Observe the error message on the screen (at least I see it on my local) 
    TypeError: Cannot read property 'on' of undefined
VerticalEventMapper.set
/home/adam/my-apps/scheduler-3.1.5/build/scheduler.umd.js:156152
  156149 | var me = this;
  156150 | me.resourceStoreDetacher && me.resourceStoreDetacher();
  156151 | me.resourceColumns.resourceStore = me._resourceStore = store;
156152 | me.resourceStoreDetacher = store.on({
         | ^  156153 |   change: me.onResourceStoreChange,
  156154 |   refresh: me.onResourceStoreRefresh,
  156155 |   thisObj: me,
View compiled
VerticalEventMapper.onChangeResourceStore
/home/adam/my-apps/scheduler-3.1.5/build/scheduler.umd.js:155597
  155594 | 
  155595 |     me.firstResource = me.lastResource = null;
  155596 |     me.clearAll();
155597 |     me.resourceStore = newResourceStore;
         | ^  155598 |     me.renderer();
  155599 |   }
  155600 | }, {
View compiled
Scheduler.trigger
/home/adam/my-apps/scheduler-3.1.5/build/scheduler.umd.js:40139
  40136 |     return false;
  40137 |   }
  40138 | } else {
40139 |   if (handler.call(thisObj || me, param) === false) {
        | ^  40140 |     return false;
  40141 |   }
  40142 | }
View compiled
(anonymous function)
/home/adam/my-apps/scheduler-3.1.5/build/scheduler.umd.js:40153
  40150 |     var name = eventName;
  40151 |     if (config.transformCase) name = _helper_StringHelper_js__WEBPACK_IMPORTED_MODULE_34__["default"].capitalizeFirstLetter(name);
  40152 |     if (config.prefix) name = config.prefix + name;
40153 |     if (config.through.trigger(name, param) === false) return false;
        | ^  40154 |   });
  40155 | } // Use DOM standard event property name to indicate that the event
  40156 | // bubbles up the owner axis.
View compiled
ResourceStore.trigger
/home/adam/my-apps/scheduler-3.1.5/build/scheduler.umd.js:40149
  40146 | 
  40147 | 
  40148 | if (relayAllTargets) {
40149 |   relayAllTargets.forEach(function (config) {
        | ^  40150 |     var name = eventName;
  40151 |     if (config.transformCase) name = _helper_StringHelper_js__WEBPACK_IMPORTED_MODULE_34__["default"].capitalizeFirstLetter(name);
  40152 |     if (config.prefix) name = config.prefix + name;
View compiled
ResourceStore.loadData
/home/adam/my-apps/scheduler-3.1.5/build/scheduler.umd.js:6540
  6537 |   };
  6538 |   me.updateDependentStores(event.action, event.records);
  6539 |   me.trigger('refresh', event);
6540 |   me.trigger('change', event);
       | ^  6541 | } else {
  6542 |   me._data = null;
  6543 | }
View compiled
ResourceStore.set
/home/adam/my-apps/scheduler-3.1.5/build/scheduler.umd.js:7550
  7547 |       me.filter();
  7548 |     }
  7549 | } else {
7550 |   me.loadData(data);
       | ^  7551 | } // loading the store discards all tracked changes
  7552 | 
  7553 | 
View compiled
Scheduler.set
/home/adam/my-apps/scheduler-3.1.5/build/scheduler.umd.js:148846
  148843 |   return resourceStore && resourceStore.records;
  148844 | },
  148845 | set: function set(resources) {
148846 |   this.resourceStore.data = resources;
         | ^  148847 | }
  148848 | /**
  148849 |  * Get/set the resource store instance.
View compiled
BryntumScheduler.shouldComponentUpdate
/home/adam/my-apps/scheduler-3.1.5/examples/react/_shared/build/BryntumScheduler.js:279
  276 | nextProps.resourcesVersion !== props.resourcesVersion || // if not use do deep equality check against previous dataset
  277 | // TODO: Might be costly for large datasets
  278 | !('resourcesVersion' in nextProps) && !('resourcesVersion' in props) && !ObjectHelper.isDeeplyEqual(this.lastResources, nextProps.resources)) {
279 |   engine.resources = nextProps.resources;
      | ^  280 |   this.lastResources = nextProps.resources && nextProps.resources.slice();
  281 | }
  282 | 
View compiled
▶ 19 stack frames were collapsed.
(anonymous function)
src/App.tsx:61
  58 | componentDidMount() {
  59 |     fetch('data/data.json').then(response => {
  60 |         response.json().then(data => {
61 |             this.setState({
     | ^  62 |                 // Increment these to notify BryntumScheduler that it should process events/resources
  63 |                 eventsVersion    : 1,
  64 |                 resourcesVersion : 1,
View compiled
This screen is visible only in development. It will not appear if the app crashes in production.
Open your browser’s developer console to further inspect this error.  Click the 'X' or hit ESC to dismiss this message.

Post by mats »

Can you reproduce this in the latest nightly build?

Post by saki »

This is actually bug in the wrapper in examples/react/_shared/src/lib/BryntumScheduler.js. The ticket is here: https://github.com/bryntum/support/issues/1172

As a workaround, remove lines:

        engine.resourceStore.relayAll(engine, 'resourceStore', true);
        engine.eventStore.relayAll(engine, 'eventStore', true);

from the file, rebuild the wrapper and it will work.

Post by adam.pilacki »

Hello
Indeed removing relayAll solves the issue :)
And about the nightly build: I just downloaded and ran scheduler-2020-07-16-release - works fine for horizontal and vertical modes.
So the problem is solved.
Thanks.

Post Reply