79401532

Date: 2025-01-31 00:20:18
Score: 0.5
Natty:
Report link

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'
      },
    },
  },
});
Reasons:
  • Long answer (-0.5):
  • Has code block (-0.5):
  • Self-answer (0.5):
  • Low reputation (1):
Posted by: Wilson Revehl