weird issue with dep optimisation

[chaoky]

I came across this while migrating a project from Astro, I imagine that it comes from Vite trying to optimise deps, but I'm not sure

https://github.com/Typeform/embed/tree/main/packages/embed-react

only works in dev mode

import { SliderButton } from "@typeform/embed-react";

only works at build time

import typeform from "@typeform/embed-react";
const { SliderButton } = typeform

works at build time and dev mode

import * as typeFrom from "@typeform/embed-react";
const { SliderButton } = typeFrom.default ?? typeFrom

error sample:

[vite-plugin-capri-main] Named export 'SliderButton' not found. The requested module '@typeform/embed-react' is a CommonJS module, which may not support all module.exports as named exports.
CommonJS modules can always be imported via the default export, for example using:

import pkg from '@typeform/embed-react';
const { SliderButton } = pkg;

error during build:
file:///home/lordie/Projects/nano/mono/my-capri-site/dist/ssr.js:10
import { SliderButton } from "@typeform/embed-react";
         ^^^^^^^^^^^^
SyntaxError: Named export 'SliderButton' not found. The requested module '@typeform/embed-react' is a CommonJS module, which may not support all module.exports as named exports.
CommonJS modules can always be imported via the default export, for example using:

import pkg from '@typeform/embed-react';
const { SliderButton } = pkg;

    at ModuleJob._instantiate (node:internal/modules/esm/module_job:124:21)
    at async ModuleJob.run (node:internal/modules/esm/module_job:190:5)
 ELIFECYCLE  Command failed with exit code 1.

[fgnass]

One way to fix this is by adding the following to your vite.config.ts:

ssr: {
  noExternal: "@typeform/embed-react",
}

Another possible solution could be to play with build.rollupOptions.defaultIsModuleExports but I haven't tried this yet.