-
Notifications
You must be signed in to change notification settings - Fork 341
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
[vite]: vue-slider-component is breaking production build #642
Comments
@NightCatSama Thank you for testing it out. Using this option in export default defineConfig({
// ...{ otherOptions }
build: {
commonjsOptions: {
/**
* Setting to make prod-build working with vue-slider-component
**/
requireReturnsDefault: true,
},
},
}) https://github.com/rollup/plugins/tree/master/packages/commonjs#requirereturnsdefault I've also tried an async import, which also has a difference how the import is treated. import { Component, Vue } from 'vue-property-decorator'
@Component({
components: {
VueSlider: () =>
import('vue-slider-component').then((module) => {
return module?.default
}),
},
}) In prod module is defined (.default not) and in dev module.default is defined ... Maybe this can be solved also by some export flags in the Updated working demo: https://stackblitz.com/edit/vue2-vite-starter-6qq9x7?file=vite.config.js |
Having the same issue |
Same problem? |
I have the same problem. Works in dev, not in production build. This started occurring after I migrated the project from Vue CLI to Vite, with a whole bunch of package updates. |
Based on the response from @rs3d, setting this in Thanks!
|
Using Your mileage may vary never mind, this actually breaks other dependencies. |
Same issue for |
Seeing how this has yet to be resolved, I figured I'd share what I did. I replaced my slider lib with: https://github.com/vueform/slider#using-with-vue-2 |
The solution that @rs3d proposed to add |
Describe the bug
Hi, I'm using
vue-slider-component
withvite@3
,vue@2.7
and this import:import VueSlider from 'vue-slider-component'
npm run build
and loading the generated bundle in the browser is throwing following error:npm run dev
in development mode has no issues.Additional context
Inspecting the
![image](https://user-images.githubusercontent.com/1399149/182344000-06bab3b4-f208-435e-b9b5-c5e5e39cf6d3.png)
Super
-variable gives me this:It looks like the
extend
function is under default in this case.No idea why this is different in my prod-build though.
Demo
https://stackblitz.com/edit/vue2-vite-starter-jzhxcq?file=README.md,src%2Fcomponents%2FMySliderComponent.vue
It's starting with
npm run dev
in dev-mode by default in the demo, to see the working slider.To see the error in the production build and to serve the dist folder please run
npm run preview
.Sometimes you need to re-open/reload the preview-window, because of changing ports.
I'm using the unminified dependency here, which can be changed to test also the minified version or a different build:
![image](https://user-images.githubusercontent.com/1399149/182345827-529b6b96-946c-4a49-b1ab-d65552563320.png)
https://github.com/rs3d/vue2-vite-starter-slider/blob/main/vite.config.js
Environment
Windows@11
Vue@2.78
vue-slider-component@3.2.20
Vite@3.0.4
The text was updated successfully, but these errors were encountered: