[VUE 3] Bryntum bundle included twice

[saki]

Just an explanation that might help: Technically, bundle included twice happens when an application tries to import two different versions (*.umd.js is considered a different version too) of a Bryntum component.

For example, in the application, we do:

import { SchedulerPro } from '@bryntum/schedulerpro/schedulerpro.umd.js'

and the wrapper, that also imports SchedulerPro:

import { SchedulerPro } from @bryntum/schedulerpro

Therefore, the first action to handle this error is check all imports in all application files. There is an offending import somewhere almost certainly.

In any case, we need a showcase we can run that produces the error so that we can help you further.

[guillaume.d]

Hi,

As I wrote previously and in the example code I put in my first comment, there is only one import in our code and it works fine when compiling the code with the module bundler "Webpack".

But initially, we wanted to use the module bundler "Vite" to compile our project (because it is faster and becoming more and more popular). And when using "Vite" we found this error of double import.

I can send you two test project we made via google drive in private if you want to.

[sergey.maltsev]

Hi!

I've created simple Vite app with

npm create vite@latest --template vue

Added required SchedulerPro code to src folder.

Configured dependencies in vite.config.js with optimizeDeps according to this Vite docs https://vitejs.dev/guide/dep-pre-bundling.html#automatic-dependency-discovery

export default defineConfig({
    plugins      : [vue()],
    optimizeDeps : {
        include : ['@bryntum/schedulerpro', '@bryntum/schedulerpro-vue-3']
    }
});

started with

npm run dev

App works fine for me.
Please check attached project.

[guillaume.d]

Thanks, I am looking how to integrate this in Quasar configuration

[sergey.maltsev]

Hi!

Did you check Quasar documentation for the purpose?

[guillaume.d]

A second time , thanks

Then I found out with your hint.

For a Quasar 2 / Vite application, we have to edit quasar.conf.js

  ...
  build: {
    ...
    extendViteConf(viteConf) {
        viteConf.optimizeDeps["include"] = [
          "@bryntum/schedulerpro",
          "@bryntum/schedulerpro-vue-3",
        ];
      },
      ...

and so the indexPage.vue looks like :

<template>
  <q-page fit>
    <bryntum-scheduler-pro
      :assignments="assignments"
      :calendars="calendars"
      :dependencies="dependencies"
      :resources="resources"
      :events="events"
      min-height="inherit"
      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>