[Bug Report] Cannot find type definition file for 'element-plus/global'

[roy8800]

Element Plus version

1.2.0-beta.5

OS/Browsers version

Windows 10

Vue version

3.2.24

Steps to reproduce

use ts Volar support and auto import

https://element-plus.org/en-US/guide/quickstart.html#full-import

tsconfig.json

{
  "compilerOptions": {
    "target": "esnext",
    "useDefineForClassFields": true,
    "module": "esnext",
    "importHelpers": true,
    "moduleResolution": "node",
    "strict": true,
    "jsx": "preserve",
    "sourceMap": true,
    "resolveJsonModule": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "lib": ["esnext", "dom"],
    "skipLibCheck": true,
    "baseUrl": ".",
    "paths": {
      "/@/*": [
        "src/*"
      ]
    },
    "types": ["element-plus/global"]
  },
  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"],
  "exclude": ["node_modules", "dist", "**/*.js"]
}

then run tsc cli

tsc --noEmit

or vue-tsc at the project

npx vue-tsc --noEmit

it will show error.

What is Expected?

build success

What is actually happening?

error TS2688: Cannot find type definition file for 'element-plus/global'.
  The file is in the program because:
    Entry point of type library 'element-plus/global' specified in compilerOptions

  tsconfig.json:22:15
    22     "types": ["element-plus/global"]
                     ~~~~~~~~~~~~~~~~~~~~~
    File is entry point of type library specified here.

Actually vscode show same error at tsconfig.json

i have to create a tsconfig.prod.json

{
  "extends":"./tsconfig.json",
  "compilerOptions": {
    "types":[]
  }
}

and then run vue-tsc --noEmit --project tsconfig.prod.json

It can run successful.

[tolking]

"compilerOptions": {
- "types": ["element-plus/global"]
}
+ "include": ["node_modules/element-plus/global.d.ts"]

[roy8800]

@tolking

Template hints have no effect.(TS 4.4.3)

[tfn290181662]

@tolking

[tolking]

@tfn290181662 Types file of some components are missing, this is a BUG. link #4531

{
  "compilerOptions": {
+    "skipLibCheck": true,
  }
}

[roy8800]

I found a solution.

like this https://github.com/vitejs/vite/blob/main/packages/create-vite/template-vue-ts/src/env.d.ts

add

 /// <reference types="element-plus/global" />

but the lastest vscode ts version is 4.5.2,the global componet hints will no effect

i have to copy element-plus/global.d.ts code into env.d.ts

[sxzz]

Please refer to https://github.com/element-plus/element-plus-playground .

// tsconfig.json
{
  "compilerOptions": {
    "target": "ESNext",
    "lib": ["ESNext", "DOM"],
    "module": "ESNext",
    "rootDir": ".",
    "baseUrl": ".",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "outDir": "dist",
    "esModuleInterop": true,
    "forceConsistentCasingInFileNames": true,
    "strict": true,
    "noImplicitAny": false,
    "noUnusedLocals": true,
    "skipLibCheck": true,
    "types": ["element-plus/global", "vite/client"]
  },
  "include": ["src/**/*"]
}

//package.json
"dependencies": {
	"element-plus": "1.2.0-beta.5",
	 "typescript": "4.5.2",
	 "vue-tsc": "0.29.8"
}

[tao1874]

I encountered the same problem

{
  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    "strict": true,
    "jsx": "preserve",
    "importHelpers": true,
    "moduleResolution": "node",
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "isolatedModules": true,
    "allowJs": true,
    "sourceMap": true,
    "baseUrl": ".",
    "types": ["node", "element-plus/global", "vite/client"],
    "paths": {
      "@/*": ["src/*"]
    },
    "lib": ["esnext", "dom", "dom.iterable", "scripthost"]
  },
  "include": [
    "src/**/*.ts",
    "src/**/*.tsx",
    "src/**/*.vue",
    "tests/**/*.ts",
    "tests/**/*.tsx",
    "type-css.d.ts",
    "src/views/service-repository/components/depend/tree.js"
  ],
  "exclude": ["node_modules"]
}

all components of element-plus have no types.
usage by full Import

[element-bot]

Hello @roy8800. Please provide an online reproduction demo by clicking this link or a minimal GitHub repository.

你好 @roy8800, 请提供一个可复现问题的链接以便于我们帮你排查问题。可以通过点击 此处 创建或者提供一个最小化的 GitHub 仓库。

[sxzz]

Please upgrade element-plus, vue-tsc, typescript to latest version.

[sxzz]

You can refer to https://github.com/element-plus/element-plus-issue-helper/blob/main/tsconfig.json .

[roy8800]

./node_modules/element-plus/global

it's OK now with ts 4.5.2 👌