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

[rs3d]

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]

[NightCatSama]

I hit a breakpoint to debug, don't know why Super becomes something else. 😿

[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

[npearson72]

Having the same issue

[AlEsGoGit]

Same problem? No fix yet?

[schyffel]

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.

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

[alex-dow]

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.

[ghaechka]

Same issue for @vue/slider

[npearson72]

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

[chlumpchatkupt]

The solution that @rs3d proposed to add requireReturnsDefault: true to vite.config.js worked for me. Thanks!