Vue3 + Vite + single-spa: unable to output an umd module during development

288 views Asked by At

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',
                },
            },
        }),
    ],
});
0

There are 0 answers