Our pure JavaScript Scheduler component


Post by binaryversion »

We are using Vite + Vue 3 + Tailwind + PostCSS, running everything in a container with node v17.9.0

When I add to a new VUE component:

import { BryntumSchedulerPro } from "@bryntum/schedulerpro-vue-3";

I get this error:
"
Uncaught Error: Bryntum bundle included twice, check cache-busters and file types (.js).
Simultaneous imports from ".module.js" and ".umd.js" bundles are not allowed.
at Function.setVersion (schedulerpro.module.js:10:20564)
at schedulerpro.module.js:10:44790
"


Post by sergey.maltsev »

Hi!

Please check Bryntum API class imports from @bryntum packages in your application

Should be like

import { SchedulerPro, ... } from '@bryntum/schedulerpro';

This is documented here
https://www.bryntum.com/docs/scheduler-pro/guide/SchedulerPro/integration/vue/guide#wrappers

If this wont help please attach some app here which we can check.


Post by binaryversion »

Hi Sergey,
if I do

 import { SchedulerPro, ... } from '@bryntum/schedulerpro';

I get a different error.
I'm using VUE 3, shouldn't be imported the wrappers from the correct packadge?


Post by sergey.maltsev »

Hi!

Please give us some sample app so we can build it and check this?


Post by binaryversion »

Do you want a zip link(url) from the project, to download?


Post by sergey.maltsev »

Hi!

If the project is big please upload it somewhere to file hosting and send link to my PM in this forum.
Or attach it here to this topic.


Post by guillaume.d »

Hi,

We encounter the same difficulties, we are using Quasar 2 (framework based on VueJS 3) + Vite

Error: Bryntum bundle included twice, check cache-busters and file types (.js).
Simultaneous imports from ".module.js" and ".umd.js" bundles are not allowed.
setVersion schedulerpro.module.js:10
<anonymous> schedulerpro.module.js:10

In order to look further, we have tested with the combination Quasar 2 + webpack, and it worked.

It is really problematic for us since Vite is really faster than webpack and becoming more popular

Our test page code based on your VueJs and Angular tutorial (the VueJS one doesn't seem complete) :

<template>
    <q-page fit>
      <bryntum-scheduler-pro
        style="min-height:inherit"
        :assignments="assignments"
        :calendars="calendars"
        :dependencies="dependencies"
        :resources="resources"
        :events="events"
        v-bind="schedulerProConfig"
      />
    </q-page>
</template>
<script setup>
import { ref, reactive } from "vue";
import { BryntumSchedulerPro } from "@bryntum/schedulerpro-vue-3";

const schedulerProConfig = reactive({
    columns : [
        { text : 'Name', field : 'name', width : 160 }
    ],
    startDate : new Date(2022, 0, 1),
    endDate   : new Date(2022, 0, 10)
});

const assignments = ref([
        { event : 1, resource : 1 },
        { event : 2, resource : 2 }
    ]);
const calendars = ref([]);
const dependencies = ref([
        { fromEvent : 1, toEvent : 2 }
    ]);
const resources = ref([
        { id : 1, name : 'Dan Stevenson' },
        { id : 2, name : 'Talisha Babin' }
    ]);
const events = ref([
        { id : 1, startDate : '2022-01-01', duration : 3, durationUnit : 'd', name : 'Event 1' },
        { id : 2, duration : 4, durationUnit : 'd', name : 'Event 2' }
    ]);
</script>
<style lang="css">
@import "~@bryntum/schedulerpro/schedulerpro.stockholm.css";
</style>

Regards


Post by marcio »

Hello guillaume.d,

Could you please share a sample app with your application environment (Quasar 2, etc) and share it here?? We'll need that sample to understand what could be causing your issue and assist you better with this.

Best regards,
Márcio


Post by sergey.maltsev »

Hello guillaume,

Please also check these

  1. In package.json for your project versions for @bryntum/schedulerpro and @bryntum/schedulerpro-vue-3 should be the same
  2. Check all imports from @bryntum/... in source code. It should be like
    import ... from '@bryntum/schedulerpro';
    and should NOT contain other imports like
    import ... from '@bryntum/schedulerpro/schedulerpro.umd.js';
    After checking please remove node_modules and package-lock.json in the project folder and reinstall all dependencies with
    npm install

If it won't help we are looking for some test project we can try to build and run.


Post by guillaume.d »

Hi,

As I said , bryntum-schedulerpro works for us using "Webpack" as javascript bundler.

But it seems not compatible with the bundler "Vite" which is becoming more popular

I am looking forward to send you a basic project to reproduce the error

Regards


Post Reply