vue-slider-component
vue-slider-component copied to clipboard
[vite]: vue-slider-component is breaking production build
Describe the bug
Hi, I'm using vue-slider-component
with vite@3
, [email protected]
and this import:
import VueSlider from 'vue-slider-component'
- Running
npm run build
and loading the generated bundle in the browser is throwing following error:
vue-slider-component.umd.js:724 Uncaught TypeError: Super.extend is not a function
at componentFactory2 (vue-slider-component.umd.js:724:26)
at vue-slider-component.umd.js:791:16
at __decorate (vue-slider-component.umd.js:1019:95)
at Module.fb15 (vue-slider-component.umd.js:1476:16)
at __webpack_require__ (vue-slider-component.umd.js:30:30)
at 091b (vue-slider-component.umd.js:94:18)
at vue-slider-component.umd.js:95:11
at webpackUniversalModuleDefinition (vue-slider-component.umd.js:3:20)
at vue-slider-component.umd.js:10:1
at vue-slider-component.umd.js:3552:2
componentFactory2 @ vue-slider-component.umd.js:724
(anonymous) @ vue-slider-component.umd.js:791
__decorate @ vue-slider-component.umd.js:1019
fb15 @ vue-slider-component.umd.js:1476
__webpack_require__ @ vue-slider-component.umd.js:30
091b @ vue-slider-component.umd.js:94
(anonymous) @ vue-slider-component.umd.js:95
webpackUniversalModuleDefinition @ vue-slider-component.umd.js:3
(anonymous) @ vue-slider-component.umd.js:10
(anonymous) @ vue-slider-component.umd.js:3552
- Running
npm run dev
in development mode has no issues.
Additional context
Inspecting the 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:
https://github.com/rs3d/vue2-vite-starter-slider/blob/main/vite.config.js
Environment
- OS & Version:
Windows@11
- Vue version:
[email protected]
- Component Version:
[email protected]
- Builder:
[email protected]
I hit a breakpoint to debug, don't know why Super becomes something else. 😿
![image](https://user-images.githubusercontent.com/13888962/182527091-00eda4df-b791-4ef6-9d22-0249f74ae17d.png)
@NightCatSama Thank you for testing it out. I've investigated it a bit further and it seems like vite > rollup for prod and vite > esbuild for dev is treating the Vue-Import differently.
Using this option in vite.config.js
helped to change Super.default.extend
to Super.extend
:
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'm not sure, but this might then be an issue of vue in combination with rollup...
I've also tried an async import, which also has a difference how the import is treated. This code works for me in dev/prod:
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 ... Probably there is also a way somewhere in https://esbuild.github.io/ to align this, but I think it's okayish to use it like this.
Maybe this can be solved also by some export flags in the vue-slider-component.umd.js
?
Updated working demo: https://stackblitz.com/edit/vue2-vite-starter-6qq9x7?file=vite.config.js
Having the same issue
Same problem? No fix yet?
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 vite.config.ts
did it for my build:
Thanks!
export default defineConfig({
build: {
commonjsOptions: {
requireReturnsDefault: true
}
},
// ...
})
Using requireReturnsDefault: true
broke other libraries. I was able to resolve this by using requireReturnsDefault: 'preferred'
Your mileage may vary
never mind, this actually breaks other dependencies.
Same issue for @vue/slider
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 requireReturnsDefault: true
to vite.config.js
worked for me. Thanks!