Lemmingh commented on issue #20554:
URL: https://github.com/apache/echarts/issues/20554#issuecomment-2724204790
> ```json
> {
> "module": "NodeNext",
> "moduleResolution": "NodeNext"
> }
> ```
>
> ```yaml
> - Framework: vue3 + vite
> ```
**This config looks like a mismatch**, and I believe it is a critical cause.
---
The TypeScript docs says:
> *[The module output
format](<https://www.typescriptlang.org/docs/handbook/modules/theory.html#the-module-output-format>)*
>
> While the emitted JavaScript for an all-ESM Node.js project might look
identical between compilations using `esnext` and `nodenext`, **the type
checking can differ**.
>
*[`nodenext`](<https://www.typescriptlang.org/docs/handbook/modules/reference.html#node16-node18-nodenext>)*
>
> describe versions of **Node.js** that *support* ES modules, not just
projects that *use* ES modules.
---
The [Vue's recommended
TSConfig](<https://github.com/vuejs/tsconfig/blob/main/tsconfig.json>) says:
```jsonc
{
"compilerOptions": {
// As long as you are using a build tool, we recommend you to author and
ship in ES modules.
// Even if you are targeting Node.js, because
// - `CommonJS` is too outdated
// - the ecosystem hasn't fully caught up with `Node16`/`NodeNext`
// This recommendation includes environments like Vitest, Vite Config
File, Vite SSR, etc.
"module": "ESNext",
// We expect users to use bundlers.
// So here we enable some resolution features that are only available in
bundlers.
"moduleResolution": "bundler",
// A few notes:
// - Vue 3 supports ES2016+
// - For Vite, the actual compilation target is determined by the
// `build.target` option in the Vite config.
// So don't change the `target` field here. It has to be
// at least `ES2020` for dynamic `import()`s and `import.meta` to work
correctly.
// - If you are not using Vite, feel free to overwrite the `target`
field.
"target": "ESNext"
}
}
```
---
Indeed, if you create a Vue 3 project using the [official
scaffold](<https://vuejs.org/guide/quick-start.html#creating-a-vue-application>),
which includes the aforementioned TSConfig recommendation, [your import
statements](<https://github.com/apache/echarts/issues/20554#issue-2714521416>)
work fine.
```shell
pnpm create vue@latest --typescript ref-proj
cd ref-proj
pnpm add echarts@~5.6.0
```
```typescript
import { use } from "echarts/core";
import { BarChart, CustomChart, GaugeChart, LineChart, PieChart, SankeyChart
} from "echarts/charts";
import { BrushComponent, DataZoomComponent, GridComponent, LegendComponent,
MarkLineComponent, ToolboxComponent, TooltipComponent } from
"echarts/components";
import { CanvasRenderer } from "echarts/renderers";
use([BarChart, CustomChart, GaugeChart, LineChart, PieChart, SankeyChart,
BrushComponent, DataZoomComponent, GridComponent, LegendComponent,
MarkLineComponent, ToolboxComponent, TooltipComponent, CanvasRenderer]);
```
Type-checking succeeds with no error.
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: [email protected]
For queries about this service, please contact Infrastructure at:
[email protected]
---------------------------------------------------------------------
To unsubscribe, e-mail: [email protected]
For additional commands, e-mail: [email protected]
