Library build does not work for UMD/IIFE bundles when Vite detects code that can be code-split

Describe the bug

When building a library (utilizing build.lib), Vite tries to code-split the generated UMD (and presumably also IIFE) bundle, which fails with the message UMD and IIFE output formats are not supported for code-splitting builds. This is only a problem when building a library and when Vite detects points in the code that can be code-split (e.g. a dynamic import).

Reproduction

https://github.com/Robin-Hoodie/vite-umd-bug

This is a scaffolded Vite project using vue. I updated vite.config.js to build in library mode based on the instructions in the documentation I also added a dynamic import in src/App.vue to introduce code splitting

I used vite@2.0.0 in the reproduction, but can confirm this is also an issue with vite@2.1.5

System Info

Output of npx envinfo --system --npmPackages vite,@vitejs/plugin-vue --binaries --browsers:

System:
    OS: macOS 11.2.3
    CPU: (12) x64 Intel(R) Core(TM) i7-8850H CPU @ 2.60GHz
    Memory: 6.33 GB / 32.00 GB
    Shell: 3.2.57 - /bin/bash
  Binaries:
    Node: 15.0.1 - ~/.nvm/versions/node/v15.0.1/bin/node
    Yarn: 1.22.5 - ~/.yarn/bin/yarn
    npm: 7.0.3 - ~/.nvm/versions/node/v15.0.1/bin/npm
    Watchman: 4.9.0 - /usr/local/bin/watchman
  Browsers:
    Chrome: 89.0.4389.114
    Edge: 89.0.774.76
    Firefox: 87.0
    Safari: 14.0.3
  npmPackages:
    @vitejs/plugin-vue: ^1.2.1 => 1.2.1 
    vite: 2.1.0 => 2.1.0 

Used package manager: yarn

Logs

$ vite build --debug
  vite:config bundled config file loaded in 75ms +0ms
  vite:config using resolved config: {
  vite:config   build: {
  vite:config     target: [ 'es2019', 'edge16', 'firefox60', 'chrome61', 'safari11' ],
  vite:config     polyfillDynamicImport: false,
  vite:config     outDir: 'dist',
  vite:config     assetsDir: 'assets',
  vite:config     assetsInlineLimit: 4096,
  vite:config     cssCodeSplit: false,
  vite:config     sourcemap: false,
  vite:config     rollupOptions: { external: [Array], output: [Object] },
  vite:config     commonjsOptions: { include: [Array], extensions: [Array] },
  vite:config     minify: 'terser',
  vite:config     terserOptions: {},
  vite:config     cleanCssOptions: {},
  vite:config     write: true,
  vite:config     emptyOutDir: null,
  vite:config     manifest: false,
  vite:config     lib: {
  vite:config       entry: '/Users/robin/development/open-source/vite-umd-bug/src/main.js',
  vite:config       name: 'ViteUmdBug'
  vite:config     },
  vite:config     ssr: false,
  vite:config     ssrManifest: false,
  vite:config     brotliSize: true,
  vite:config     chunkSizeWarningLimit: 500
  vite:config   },
  vite:config   plugins: [
  vite:config     'alias',
  vite:config     'vite:resolve',
  vite:config     'vite:html',
  vite:config     'vite:css',
  vite:config     'vite:esbuild',
  vite:config     'vite:json',
  vite:config     'vite:wasm',
  vite:config     'vite:worker',
  vite:config     'vite:asset',
  vite:config     'vite:vue',
  vite:config     'vite:define',
  vite:config     'vite:css-post',
  vite:config     'vite:build-html',
  vite:config     'commonjs',
  vite:config     'vite:data-uri',
  vite:config     'rollup-plugin-dynamic-import-variables',
  vite:config     'vite:import-analysis',
  vite:config     'vite:esbuild-transpile',
  vite:config     'vite:terser',
  vite:config     'vite:reporter'
  vite:config   ],
  vite:config   define: { __VUE_OPTIONS_API__: true, __VUE_PROD_DEVTOOLS__: false },
  vite:config   ssr: { external: [ 'vue', '@vue/server-renderer' ] },
  vite:config   configFile: '/Users/robin/development/open-source/vite-umd-bug/vite.config.js',
  vite:config   inlineConfig: {
  vite:config     root: undefined,
  vite:config     base: undefined,
  vite:config     mode: undefined,
  vite:config     configFile: undefined,
  vite:config     logLevel: undefined,
  vite:config     clearScreen: undefined,
  vite:config     build: {}
  vite:config   },
  vite:config   root: '/Users/robin/development/open-source/vite-umd-bug',
  vite:config   base: '/',
  vite:config   resolve: { dedupe: undefined, alias: [ [Object] ] },
  vite:config   publicDir: '/Users/robin/development/open-source/vite-umd-bug/public',
  vite:config   command: 'build',
  vite:config   mode: 'production',
  vite:config   isProduction: true,
  vite:config   optimizeCacheDir: '/Users/robin/development/open-source/vite-umd-bug/node_modules/.vite',
  vite:config   server: {},
  vite:config   env: { BASE_URL: '/', MODE: 'production', DEV: false, PROD: true },
  vite:config   assetsInclude: [Function: assetsInclude],
  vite:config   logger: {
  vite:config     hasWarned: false,
  vite:config     info: [Function: info],
  vite:config     warn: [Function: warn],
  vite:config     error: [Function: error],
  vite:config     clearScreen: [Function: clearScreen]
  vite:config   },
  vite:config   createResolver: [Function: createResolver]
  vite:config } +4ms
vite v2.1.0 building for production...
✓ 7 modules transformed.
dist/style.css            0.20kb / brotli: 0.12kb
dist/HelloWorld.js        0.76kb / brotli: 0.40kb
dist/vite-umd-bug.es.js   9.91kb / brotli: 7.02kb
UMD and IIFE output formats are not supported for code-splitting builds.
error during build:
Error: UMD and IIFE output formats are not supported for code-splitting builds.
    at error (/Users/robin/development/open-source/vite-umd-bug/node_modules/rollup/dist/shared/rollup.js:5305:30)
    at validateOptionsForMultiChunkOutput (/Users/robin/development/open-source/vite-umd-bug/node_modules/rollup/dist/shared/rollup.js:12597:16)
    at Bundle.generate (/Users/robin/development/open-source/vite-umd-bug/node_modules/rollup/dist/shared/rollup.js:12436:17)
    at processTicksAndRejections (node:internal/process/task_queues:93:5)
    at async handleGenerateWrite (/Users/robin/development/open-source/vite-umd-bug/node_modules/rollup/dist/shared/rollup.js:20306:23)
    at async doBuild (/Users/robin/development/open-source/vite-umd-bug/node_modules/vite/dist/node/chunks/dep-6f1d3d8c.js:44191:26)
    at async build (/Users/robin/development/open-source/vite-umd-bug/node_modules/vite/dist/node/chunks/dep-6f1d3d8c.js:44068:16)
    at async CAC.<anonymous> (/Users/robin/development/open-source/vite-umd-bug/node_modules/vite/dist/node/cli.js:14072:9)
error Command failed with exit code 1.

---

Before submitting the issue, please make sure you do the following

• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn’t already an issue that reports the same bug to avoid creating a duplicate.
• Provide a description in this issue that describes the bug.
• Make sure this is a Vite issue and not a framework-specific issue. For example, if it’s a Vue SFC related bug, it should likely be reported to https://github.com/vuejs/vue-next instead.
• Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.

[mecirmartin]

I have the same problem, none of the above solutions/configs worked

[userquin]

ok, you can use this configuration:

// vite.config.js
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from "path";

// https://vitejs.dev/config/
export default defineConfig({
  build: {
    lib: {
      entry: path.resolve(__dirname, "src/main.js"),
      name: "ViteUmdBug"
    },
    rollupOptions: {
      external: ["vue"],
      output: [{
        format: "esm",
        esModule: true,
        exports: "named",
        globals: {
          vue: "Vue"
        }
      }, {
        format: "umd",
        inlineDynamicImports: true,
        interop: "esModule",
        exports: "named",
        globals: {
          vue: "Vue"
        }
      }],

    }
  },
  plugins: [vue()]
})