Library build does not work for UMD/IIFE bundles when Vite detects code that can be code-split #2982
Comments
Robin-Hoodie
changed the title
Robin-Hoodie
changed the title
|
Any updates on this? |
|
i have the same problem..... |
|
Just tested this with the latest version (2.3.7) and can confirm this bug is still present |
|
Just using // 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: {
inlineDynamicImports: true, // <== here the entry
globals: {
vue: "Vue"
}
},
}
},
plugins: [vue()]
})output: yarn run v1.22.10
warning package.json: No license field
$ vite build
building for production...
✓ 7 modules transformed.
dist/style.css 0.20kb / brotli: 0.12kb
dist/vite-umd-bug.es.js 10.67kb / brotli: 7.36kb
dist/vite-umd-bug.umd.js 10.40kb / brotli: 7.19kb
Done in 0.66s.
|
|
Thanks for the tip @userquin , that does indeed fix the immediate problem of being able to build. |
|
you can add 2 outputs, I will test it and feed back here... |
|
should output something like this? |
|
Right of course. We can't use code splitting with UMD builds as the error message clearly indicates. |
|
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()]
}) |
|
you can see it on my fork |
|
what do you want is to export // 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/components/HelloWorld.vue"),
name: "HelloWorld"
},
rollupOptions: {
external: ["vue"],
output: [{
format: "es",
esModule: true,
exports: "named",
globals: {
vue: "Vue"
}
}, {
format: "umd",
inlineDynamicImports: true,
interop: "esModule",
exports: "named",
globals: {
vue: "Vue"
}
}],
}
},
plugins: [vue()]
}) |
|
I have the same problem, none of the above solutions/configs worked |
sodatea
added
documentation
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.jsto build in library mode based on the instructions in the documentationI also added a dynamic
importinsrc/App.vueto introduce code splittingI used
vite@2.0.0in the reproduction, but can confirm this is also an issue withvite@2.1.5System 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.0Used package manager: yarn
Logs
Before submitting the issue, please make sure you do the following
The text was updated successfully, but these errors were encountered: