echarts icon indicating copy to clipboard operation
echarts copied to clipboard

[Bug] Typescript setting module to "NodeNext" cannot obtain type prompt

Open eavidy opened this issue 1 year ago • 5 comments

Version

5.5.0

Link to Minimal Reproduction

https://github.com/eavidy/test_case/tree/echart-1

Steps to Reproduce

  1. Clone Repository git clone -b echart-1 [email protected]:eavidy/test_case.git This example mainly includes two files tsconfig.json:
{
  "compilerOptions": {
    "module": "NodeNext",
    "moduleResolution": "NodeNext",
    "strict": true
  },
  "exclude": ["node_modules"]
}

main.mts :

Import {init} from "echarts/core";
  1. Execute commands in the project directory npm install tsc --noEmit

Current Behavior

tsc --noEmit output:

main.mts:1:10 - error TS2305: Module '"echarts/core"' has no exported member 'init'.

1 import { init } from "echarts/core";
           ~~~~

node_modules/echarts/core.d.ts:20:15 - error TS2834: Relative import paths need explicit file extensions in ECMAScript imports when '--moduleResolution' is 'node16' or 'nodenext'. Consider adding an extension to the import path.

20 export * from './types/dist/core';
                 ~~~~~~~~~~~~~~~~~~~


Found 2 errors in 2 files.

Errors  Files
     1  main.mts:1
     1  node_modules/echarts/core.d.ts:20

vscode: image

Expected Behavior

Setting module and moduleResolution to CommonJs and node respectively can work properly

{
  "compilerOptions": {
    "module": "CommonJS",
    "moduleResolution": "Node",
    "strict": true
  },
  "exclude": ["node_modules"]
}

image

Can the NodeNext module for Typescript be supported?

Environment

- OS: Mac OS
- Browser:
- Framework:
- typescript: 5.4.5

Any additional comments?

No response

eavidy avatar May 31 '24 07:05 eavidy

Facing new problem.

To solve type err I try to use import xx from "echarts/types/xx.js",however it throw Failed to resolve import "echarts/types/xx.js"

And to solve the exist file,use import xx from "echarts/xx" throw "Module 'echarts/xx' has no exported member xx".

Is there any workaround for nodenext?😅

BTMuli avatar Oct 25 '24 02:10 BTMuli

Any news ? We are blocked with that and it's already here in 5.5.1

throrin19 avatar Dec 03 '24 09:12 throrin19

Any news ? We are blocked with that and it's already here in 5.5.1

The Echarts package actually comes with ES Module types. They are located in the echarts/types/src/export/ directory, but they are not exported. My current approach is to create a new file in the project to re-export them.

echarts-reexport.mjs

/// <reference path="./echarts-reexport.d.mts"/>
export * from "echarts";

echarts-reexport.d.mts

export * from "echarts/types/src/export/core.d.ts";
export * from "echarts/types/src/export/charts.d.ts";
export * from "echarts/types/src/export/components.d.ts";
export * from "echarts/types/src/export/features.d.ts";
export * from "echarts/types/src/export/option.d.ts";
export * from "echarts/types/src/export/renderers.d.ts";
export * from "echarts/types/src/export/api.d.ts";

Now, simply import echarts from this file to get the correct type hints.

main.mts

import { init } from "./echarts-reexport.mjs";

Then you can configure the tsconfig.json file and the path alias for the bundler, which can replace Echarts.

eavidy avatar Dec 04 '24 02:12 eavidy

This is weird not to export directly types and do this. It works fine in 5.4 :(

You can simplify your reexport and alias directly bi an echarts.d.tsfile like this :

declare module 'echarts/core.js' {
    export * from 'echarts/types/src/export/core.d.ts';
}
declare module 'echarts/charts.js' {
    export * from 'echarts/types/src/export/charts.d.ts';
}
declare module 'echarts/components.js' {
    export * from 'echarts/types/src/export/components.d.ts';
}
declare module 'echarts/features.js' {
    export * from 'echarts/types/src/export/features.d.ts';
}
declare module 'echarts/option.js' {
    export * from 'echarts/types/src/export/option.d.ts';
}
declare module 'echarts/renderers.js' {
    export * from 'echarts/types/src/export/renderers.d.ts';
}
declare module 'echarts/api.js' {
    export * from 'echarts/types/src/export/api.d.ts';
}

throrin19 avatar Dec 04 '24 09:12 throrin19

Your way is better 👍

eavidy avatar Dec 05 '24 02:12 eavidy