Test failure with Vitest: require() of ES Module not supported

[ken-s-analog]

Description

Hello!

I have set up vite, vitest, and react-testing-library with react-echarts and while it works fine, any tests that have an Echart component fails with this error message:

FAIL  src/App.test.tsx [ src/App.test.tsx ]
Error: require() of ES Module /Users/name/Documents/projects/test-echarts/node_modules/echarts/core.js from /Users/name/Documents/projects/test-echarts/node_modules/@kbox-labs/react-echarts/dist/index.js not supported.
Instead change the require of core.js in /Users/name/Documents/projects/test-echarts/node_modules/@kbox-labs/react-echarts/dist/index.js to a dynamic import() which is available in all CommonJS modules.
 ❯ Object.<anonymous> node_modules/@kbox-labs/react-echarts/dist/index.js:40:19
     38| 
     39| // src/use-echarts.ts
     40| var import_core = require("echarts/core");
       |                   ^
     41| var import_react = require("react");
     42| 

I have also created a barebones repo that reproduces the error:
https://github.com/ken-s-analog/react-echarts-failure-example

Link to Reproduction

https://stackblitz.com/edit/vitejs-vite-pc3p6k?file=src%2FApp.test.tsx

Steps to reproduce

1. Run npm create vite@latest my-app -- --template react-ts
2. Install and set up vitest, jsdom, echarts, @kbox-labs/react-echarts, @testing-library/jest-dom, @testing-library/react
3. Put an Echart component in App.tsx
4. Create a test, rendering the App component in RTL
5. Run the test. It fails
6. Remove the Echart component, and the tests pass

JS Framework

React (TS)

Version

1.4.0

Browser

VS Code

Operating System

• macOS
• Windows
• Linux

Additional Information

No response

[hugocxl]

Hi @ken-s-analog. Sorry, I am pretty busy at the time. Have you looked into it?

[ken-s-analog]

I tried to look into it some but didn't make any meaningful progress. The workaround I'm using for now is to vi.mock the library during testing

[wralith]

Issue still exists, mocking the component I want to test in not practical.

I guess it fixed in upstream, will try some solutions.
https://echarts.apache.org/handbook/en/basics/release-note/5-5-0/

Edit:

"type": "module" missing in package.json, which results tsup to use CommonJS thus require() in .js extension dist file.

---

import { EChart } from "@kbox-labs/react-echarts/dist/index.mjs";

Importing from mjs fixes this on users side, maybe you can add to documentation.
IMO ES Modules should be the default. 🙏

[hugocxl]

Hi @wralith, thanks for looking up this. I'll add the change as you commented

[hugocxl]

Hi @wralith change published under v1.4.1 version. Thanks for taking time to look into this 🙏🏻

[caesar1030]

I was having the same issue with v1.4.2, so I lowered it to 1.4.1 and it worked fine.