[Request] Publish code with ESM syntax/avoid using `default` export with CJS syntaxes

[sararathje]

Description

We are migrating from Vite 7 to Vite 8, and are noticing an issue with importing the EmbedFlow from @formsort/react-embed. The default import from CommonJS modules now work like this (copy pasta'd from the migration docs):

The default import from a CommonJS (CJS) module is now handled in a consistent way.

If it matches one of the following conditions, the default import is the module.exports value of the importee CJS module. Otherwise, the default import is the module.exports.default value of the importee CJS module:

• The importer is .mjs or .mts.
• The closest package.json for the importer has a type field set to module.
• The module.exports.__esModule value of the importee CJS module is not set to true.

When we import the EmbedFlow for our React components from '@formsort/react-embed' like so:

import EmbedFlow from '@formsort/react-embed';

we now get an error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object., and the embedded form fails to load.

Ask

Both Vite and Rolldown recommended raising an issue with the dependency to ensure that code is published with ESM syntax or avoid using default exports:

• https://vite.dev/guide/migration#consistent-commonjs-interop
• https://rolldown.rs/in-depth/bundling-cjs#recommendations-for-library-authors

[alikirec]

Hi @sararathje, thanks for clear repro. We currently don't have bandwidth to work on ESM compatibility, but you can work around this problem rendering EmbedFlow.default. I'm leaving an example here.

import ReactEmbed from '@formsort/react-embed';
import './App.css'

function App() {
  return (
    <>
      <section id="formsort-embed">
        {/* @ts-expect-error esm compatibility */}
        <ReactEmbed.default
          clientLabel="formsort"
          flowLabel="onboarding"
        />
      </section>
    </>
  )
}

export default App

Note: you should have @formsort/react-embed in optimizeDeps.include in your vite config.

[sararathje]

Amazing, thanks so much for the example -- this is super helpful! 🙇‍♀️

[byrnehollander]

Hi @alikirec, I've put up a PR for this here: #192

(We also ran into this issue when upgrading to Vite 8)