I am attempting to import a library (jointjs) into a Vue app. It gets assigned as a global property on Vue and subsequently modified. Here's a simple reproduction of what I'm trying to do:
import Vue from 'vue';
import * as joint from 'jointjs';
import App from '@/App.vue';
// we need to get our own connectors
let customConnectors={
f: function() {}
}
Vue.use({
install: function (Vue) {
// In development, this works:
// _.assign(joint.connectors, customConnectors);
// as does this:
// _.each(customConnectors, (item, key) => { joint.connectors[key] = item;});
// and this:
// for (const connector in customConnectors) {
// joint.connectors[connector] = customConnectors[connector];
// }
// but none of those work in production, saying joint is a constant or not extensible
// this one gives a build error about f not being exported by jointjs/src/connectors
// joint.connectors['f'] = customConnectors['f'];
// this one gives the same error but runs without error; but only when minified, so I think it's actually
// just removing the statement
joint.connectors.f = customConnectors.f;
Vue.joint = joint;
}
});
let app = new Vue({
joint,
render: h => h(App)
}).$mount('#app');
Every one of the examples in the comments above works fine in dev. None of them work when built for production.
The problem seems to be in production the import of jointjs is treated as a const but in development it's not?
This is my vite config:
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 intentional behavior? Is there a build option I'm missing?
Here's a reproduction repo if it's helpful: https://github.com/dovrosenberg/vite-test
Thanks!
Thanks to the hints from Estus Flask in the comments, I've managed to make this work.
I used rollup to convert jointjs to an ES module first.
npm i --save-dev rollup-plugin-commonjs
Rollup should already be installed because vite uses it.
I created a rollup.config.js file in the project root:
import commonjs from 'rollup-plugin-commonjs';
export default {
input: 'node_modules/jointjs/joint.mjs',
output: {
file: 'src/plugins/jointjsESM.js',
format: 'es',
freeze: false, // this is key to preventing everything from being constant
},
plugins: [
commonjs({
// search for files other than .js files (must already
// be transpiled by a previous plugin!)
extensions: [ '.js', '.mjs' ], // Default: [ '.js' ]
// if true then uses of `global` won't be dealt with by this plugin
ignoreGlobal: false, // Default: false
// if false then skip sourceMap generation for CommonJS modules
sourceMap: false, // Default: true
}),
],
};
The output.file value can point to wherever you want the resulting module to be.
You can then create package.json script (or use npx) to run rollup --config rollup.config.js
That will create the new module file at the output.file location. You could run this script before vite build as part of a build pipeline.
Then, instead of import * as joint from 'jointjs', you import from the file that was output, but you need to assemble the joint object yourself using whichever pieces you need... for example:
import {
g,
dia,
shapes,
connectors,
} from '@/plugins/jointjsESM.js';
let joint = { g, dia, shapes, connectors};
You can also move jointjs to only be installed as a dev dependency since it's not being used as part of the build.