Carousel doesn't work in Vite (vue2)/rollup production SSR build - render function or template not defined in component: ssr-carousel

[SecretPocketCat]

We're migrating our app to vite and adding SSR to it. The carousel work nicely with the dev build. However after creating the production build (vite build --outDir dist/ssr --ssr src/entryServer.ts), running it ('cross-env NODE_ENV=production node --experimental-specifier-resolution=node ./dist/server.cjs') and trying to view a route with a carousel fails with

render function or template not defined in component: ssr-carousel

vue: "2.7.5", vite: "^3.0.9" @vitejs/plugin-vue2: "^1.1.2" vue-ssr-carousel: "^1.4.0"

I went through the existing issue but anything related to SSR seems to be nuxt-related.

Any idea why that might be/how to fix this?

[SecretPocketCat]

I tried registering the component as global, but the same error popped up.

Updating deps to their newest versions to also didn't help vue: "2.7.10", vite: "^3.0.9" @vitejs/plugin-vue2: "^1.1.2" vue-ssr-carousel: "^1.5.0"

[SecretPocketCat]

Here's a repro of the issue (it's a repo, since this's build-related) https://github.com/SecretPocketCat/vue2-ssr-carousel-render-fn-not-defined-repro/

[weotch]

I console logged Carousel here and saw that what is getting imported is an object with a default property. AKA, some interaction between vite and the index.js that my webpack build process is generating is resulting in vite not seeing the default export.

Switching to this fixed the error you reported:

export default defineComponent({
  components: {
    Carousel: Carousel.default,
  },
});

However, I'm still seeing issues:

It's like the server side renderer isn't processing <carousel> like it's a component, it's just rendering an HTML tag with that name.

I haven't used vite before ... I'm not really sure where to go from here.

[SecretPocketCat]

I actually got undefined when trying to log the component.

I think vite hands most stuff over to rollup for the build so I'd expect the issue to be with this package, vue or rollup.

I will try to rebuild the carousel from source with rollup. I already tried that but hit some issues, but I'll give it another shot.

[SecretPocketCat]

I stand corrected. Not sure when/how I got the undefined, but the import was the invalid default as you mentioned.

Anyway, I tried the carousel with a Vue-CLI/Webpack based build and that works fine https://github.com/SecretPocketCat/vue2-ssr-carousel-render-fn-not-defined-repro/tree/webpack-vuecli

[SecretPocketCat]

I had to switch back to webpack, so this issue not really a problem for me now, but Evan replied to the issue I created in the vue repo with a possible solution to this.

https://github.com/vuejs/vue/issues/12775#issuecomment-1274148239