Skip to content

Vite 8 crash due to legacy CJS imports #372

@thomasneger

Description

@thomasneger

Hi suneditor-react team,

In our project, we have been using suneditor-react for a few years now and I wanted to share a word of appreciation for it. Thank you very much.

I was just migrating our monorepo to vite 8 with @vitejs/plugin-react and noticed a runtime error related to the suneditor-react import:

Uncaught Error: Element type is invalid: expected a string (for built-in components) or a class/function

The issue related to the legacy commonjs exports of the suneditor-react package. I'm aware this is not just a simple bug fix, it will most definitely require changing the project build significantly, possible a breaking change that would also require a new major release...

At any rate, I just wanted to leave a note here if it helps anyone else, because there is a workaround still.

Related repository

To Reproduce
Open the Stackbliz link, hit F12 to open the dev console and observe the error.

Otherwise, to quickly reproduce:

  • pnpm update vite@8 @vitejs/plugin-react@6
  • pnpm dev

Then simply render the SunEditor component:

import 'suneditor/dist/css/suneditor.min.css';

import SunEditor from 'suneditor-react';

// Workaround:
// import SunEditorDefault from 'suneditor-react';
// const SunEditor: typeof SunEditorDefault =
//   typeof SunEditorDefault === 'function'
//     ? SunEditorDefault
//     : (SunEditorDefault as unknown as { default: typeof SunEditorDefault })
//         .default;

function App() {
  return <SunEditor />;
}

export default App;

Expected behavior
In a perfect world, suneditor-react is an ESM package and doesn't crash (sorry, I know it's a lot to ask in a legacy project 👀).

Screenshots

Image

Code Sandbox Demo
https://stackblitz.com/edit/vitejs-vite-3k8qpqnm?file=src%2FApp.tsx

Metadata

Metadata

Assignees

Labels

No labels
No labels

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions