All credit goes to Estus on this. Here's the working Vite config for those who may encounter the same problem. When trying to load an externally built Vue component at runtime dynamically, it needs to be in ESM format:
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
export default defineConfig({
plugins: [vue()],
define: {
'process.env': {}
},
publicDir: false,
build: {
outDir: 'dist',
lib: {
entry: './src/AsyncComponentName.vue',
name: 'AsyncComponentName',
fileName: (format) => `async-component-file.${format}.js`,
formats: ['es'],
},
rollupOptions: {
output: {
globals: {
vue: 'Vue',
},
exports: 'default',
name: 'AsyncComponentName'
},
},
},
});