[vite]: vue-slider-component is breaking production build

Describe the bug

Hi, I’m using vue-slider-component with vite@3, vue@2.7 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: Vue@2.78
• Component Version: vue-slider-component@3.2.20
• Builder: Vite@3.0.4

[rs3d]

@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

[schyffel]

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
    }
  },
  // ...
})