hustcc / hustcc/echarts-for-react
Import ECharts.js modules manually results in SyntaxError: Unexpected token 'export' error when running Jest
- Dominant language
- TypeScript
- Stars
- 5k
- Forks
- 650
- PR merge metrics
- No merged PRs in 30d
Description
After loosing half a day of trying to have this working, there seems to be something broken when Jest is involved. The instructions in the README.md do not seem to be complete.
I have a fairly standard React v17 app (created via CRA), where I am using `echarts-for-react`.
When having something like this, it results in Jest-tests **not working**:
```tsx
import ReactEChartsCore from "echarts-for-react/lib/core";
import echarts from "echarts/core";
import { LineChart } from "echarts/charts";
import { GridComponent, TitleComponent, TooltipComponent, DataZoomComponent, DataZoomInsideComponent, DataZoomSliderComponent, LegendComponent } from "echarts/components";
import { CanvasRenderer } from "echarts/renderers";
echarts.use(
[
TitleComponent,
TooltipComponent,
GridComponent,
DataZoomComponent,
DataZoomInsideComponent,
DataZoomSliderComponent,
LegendComponent,
LineChart,
CanvasRenderer
]
);
export const SomeComponent: React.FC = () => {
// ...
return (
);
};
```
Jest quits exploding with the following lines:
```
C:\somepath\node_modules\echarts\lib\export\core.js:45
export * from '../core/echarts.js';
^^^^^^
SyntaxError: Unexpected token 'export'
6 | import type { EChartsOption } from "echarts-for-react";
7 | import ReactEChartsCore from "echarts-for-react/lib/core";
> 8 | import echarts from "echarts/lib/export/core";
| ^
9 | import { LineChart } from "echarts/charts";
10 | import { GridComponent, TitleComponent, TooltipComponent, DataZoomComponent, DataZoomInsideComponent, DataZoomSliderComponent, LegendComponent } from "echarts/components";
11 | import { CanvasRenderer } from "echarts/renderers";
at Runtime.createScriptFromCode (node_modules/jest-runtime/build/index.js:1350:14)
```
With these lines it works .... but why? What am I missing?
```tsx
import ReactECharts from "echarts-for-react";
export const SomeComponent: React.FC = () => {
// ...
return (
);
};
```
Just to be clear: it is only Jest here that seems to not work. When building my application, or running `yarn start` as normal, it works.
Some parts of the `package.json` from my project.
```json
{
// ...
"scripts": {
// ...
"start": "cross-env REACT_APP_PRODUCT_VERSION=development react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --coverage --reporters=default --reporters=jest-junit",
// ...
},
"jest": {
"coverageReporters": [
"json",
"lcov",
"text-summary",
"clover"
]
},
// ...
"dependencies": {
"echarts": "^5.3.3",
"echarts-for-react": "^3.0.2",
"react": "^17.0.2",
},
// ...
}
```
Contributor guide
No contributing guide indexed for this repository
Assessment
This issue has not been assessed yet.