I am currently implementing VueJS 2 and using vue-custom-element with lazy-loading in the following way:
Vue.customElement('nav-icon', () => new Promise((resolve) => {
require(['./NavIcon.vue'], (lazyComponent) => resolve(lazyComponent.default));
}), {
beforeCreateVueInstance
});
This setup allows me to upload the JS and CSS into a Shopify Theme and use <nav-icon> to display a custom component.
Everything is functioning correctly except for the fact that in my main entry-point JS file, the names of the chunks for the CSS files, and their paths, are incorrect.
In the configureWebpack section of my vue.config.js file, I have defined the output as follows:
output: {
filename: '[name].js',
chunkFilename: 'my-prefix-[name].js'
}
This configuration works fine for the JS files.
I also have a plugins entry for the MiniCssExtractPlugin that renames the resulting CSS files on-disk:
new MiniCssExtractPlugin({
filename: '[name].css',
chunkFilename: 'my-prefix-[name].css'
})
However, this does not update the names within the entry-point JavaScript (they are missing 'my-prefix-'), causing them all to return a 404 error when requested..!
In addition, within the entry-point JavaScript, they are all being requested under a css/ folder, which is not usable in my case.
My questions are:
A) How can I rename the CSS chunks correctly so that the filenames on disk match what is requested in the entry-point JavaScript?
B) How can I change the css/ path that the entry-point JavaScript assumes the files are located within? It is not feasible for me to use sub-folders as Shopify Theme Assets do not support them, all files must be top-level.
If I manually edit the generated entry-point file to remove the css/ path and set the correct names, everything works as expected. However, this process is tedious and not scalable.
Thank you for your help!