I have several Vue 3 projects using webpack that are part of en ecossystem of microfrontends. I am trying to migrate one of them to use vite instead of webpack.
This project uses the single-spa-vue lib to export. The src/main.ts file has the basic code:
import singleSpaVue from 'single-spa-vue';
...
const vueLifecycles = singleSpaVue({
//config
})
export const { bootstrap, mount, unmount } = vueLifecycles;
export const devtools = {
overlays: {
selectors: [containerSelector],
},
};
Moving to Vite, I have created a vite.config.ts file and trying to follow the https://single-spa.js.org/docs/ecosystem-vite
from the docs:
import vue from '@vitejs/plugin-vue'
export default {
rollupOptions: {
input: 'src/main.ts',
format: 'system',
preserveEntrySignatures: true
},
base: 'http://localhost:3000',
plugins: [vue({
template: {
transformAssetUrls: {
base: '/src'
}
}
})],
server: {
port: 3000,
},
}
But the compiler always throws something like
Could not auto-determine entry point from rollupOptions or html files and there are no explicit optimizeDeps.include patterns. Skipping dependency pre-bundling.
a server in port 3000 is started but I cannot access any generated javascript bundle. If I access http://localhost:3000/src/main.ts I can see the original .ts file.
The weird part is that for the build (vite build) with the following vite.config.ts it works like a charm (a dist/ folder is created with an app.js generated with the Vue application as an umd module ready to be used in the single-spa environment):
import { defineConfig } from 'vite';
import { resolve } from 'path';
import path from 'path';
import vue from '@vitejs/plugin-vue';
export default defineConfig({
build: {
outDir: './dist',
emptyOutDir: true,
cssCodeSplit: false,
manifest: true,
rollupOptions: {
input: {
main: resolve(__dirname, 'src/main.ts'),
},
preserveEntrySignatures: true,
output: {
entryFileNames: 'app.js',
assetFileNames: '[name].js',
format: 'umd',
name: 'sss',
},
},
},
resolve: {
fullySpecified: false,
modules: ['node_modules'],
extensions: ['.mjs', '.js', '.ts', '.jsx', '.tsx', '.json'],
alias: { '@': path.resolve(__dirname, 'src') },
},
plugins: [
vue({
template: {
transformAssetUrls: {
base: '/src',
},
},
}),
],
});