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

[meepleek]

Version

2.7.10

Reproduction link

github.com

Steps to reproduce

Clone the reproduction repo and follow the steps from the repo readme to run the SSR build and repro the issue

What is expected?

The component works the same in the dev (vite) build and the production (rollup) build during SSR

What is actually happening?

The dev build SSR works fine, but the production SSR build fails with render function or template not defined in component: carousel

---

I created an issue in the repo for the external component, but upon further reflection I think this might be a more general vue (or maybe rollup?) issue.
BKWLD/vue-ssr-carousel#89

I tried asking on discord in the #vue-2 channel, but no one replied unfortunately.

[meepleek]

This work fine with webpack
https://github.com/SecretPocketCat/vue2-ssr-carousel-render-fn-not-defined-repro/tree/webpack-vuecli

So I'm not sure whether this issue stems from the lib, vite, vue2 vite plugin or rollup.

[yyx990803]

This is likely a @rollup/plugin-commonjs issue, since vue-ssr-carousel's dist file is webpack-produced commonjs bundle.

Either way, definitely not a Vue core issue.

Also, vue-ssr-carousel can avoid this by shipping a separate ESM build by using libraryTarget: 'module' in its webpack config, then specify it in the module field in package.json.

[meepleek]

We had to switch back to webpack because we needed it for bundleRenderer and vite started breaking when we added in lazy hydration anyway.
Either way, your answer is very much appreciated, thank you.