I am currently working on incorporating the jointjs library into a Vue application. It is being declared as a global property in Vue and then modified accordingly. Below is a basic example of what I am trying to achieve:
import Vue from 'vue';
import * as joint from 'jointjs';
import App from '@/App.vue';
// custom connectors are required
let customConnectors={
f: function() {}
}
Vue.use({
install: function (Vue) {
// In development, the following methods work:
// _.assign(joint.connectors, customConnectors);
// _.each(customConnectors, (item, key) => { joint.connectors[key] = item;});
// and this:
// for (const connector in customConnectors) {
// joint.connectors[connector] = customConnectors[connector];
// }
// However, none of these methods work in production, throwing errors about joint being a constant or not extensible
// The statement below causes a build error regarding 'f' not being exported by jointjs/src/connectors
// joint.connectors['f'] = customConnectors['f'];
// This one gives the same error but runs without any issue; However, it only works when minified, potentially just removing the statement
joint.connectors.f = customConnectors.f;
Vue.joint = joint;
}
});
let app = new Vue({
joint,
render: h => h(App)
}).$mount('#app');
All the examples mentioned in the comments above function well during development. None of them work once built for production.
The issue appears to be that in production, the jointjs import is treated as a constant whereas in development it is not?
Below is my vite configuration:
import { defineConfig } from 'vite';
import { createVuePlugin } from 'vite-plugin-vue2';
import ViteComponents from 'vite-plugin-components';
import path from 'path';
export default defineConfig({
plugins: [
createVuePlugin(),
ViteComponents({
})
],
server: {
port: 8080
},
resolve: {
alias: [
{
find: '@',
replacement: path.resolve(__dirname, 'src')
}
]
},
build: {
chunkSizeWarningLimit: 600,
}
});
Is this behavior intentional? Am I missing a build option?
If needed, here is a link to a repository with a reproduction: https://github.com/dovrosenberg/vite-test
Thank you!