Using element-plus page component ts error JSX element type "ElRow" does not have any construction signature or call signature

Project scenario:

The background management system developed by vite, ts, vue3, element-plus, axios and other technologies.

---

Problem Description

Encountered a problem during development, that is, main.ts has registered ElementPlus globally, but in the vue page of business development, some element-plus el-row, el-card, etc. prompt that the JSX element type "ElRow" does not have
any Construct signature or call signature , as shown in the figure

main.ts

import {
    
     createApp } from 'vue'
import App from '/@/App.vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import 'element-plus/theme-chalk/display.css'
import SvgIcon from '/@/components/SvnIcon/index.vue'
import * as ElIcons from '@element-plus/icons-vue'

const app = createApp(App)
app.use(ElementPlus)
app.component('SvgIcon', SvgIcon)

const ElIconsData = ElIcons as unknown as Array<() => Promise<typeof import('*.vue')>>
for (const iconName in ElIconsData) {
    
    
    app.component(`ElIcon${
      
      iconName}`, ElIconsData[iconName])
}
  
app.mount('#app')

---

Although it does not affect the operation, it is really uncomfortable to see the red and red wavy lines in the code. There are a lot of Baidu, but there is no actual useful information.

Cause Analysis:

Start to analyze where the problem is.
I have tried for a long time to reintroduce element-plus. I have checked main.ts and vite.config.ts, but nothing works. Later, I tried to write directly in the business page:

import {
    
     ElRow ElCard} from "element-plus";
//然后在components里注册下
components: {
    
    
        ElRow ，
        ElCard
 },

There is no prompt message, but it is too complicated to write like this on every page. Then when browsing ts-related technical documents, I saw the explanation of tsconfig.json, and suddenly thought, since it is a prompt from the ts compilation newspaper, could it be affected by something in tsconfig.json.

tsconfig.json documentation

solution:

By reading the documentation, I saw the configuration item types

It is suspected that the types are specified in tsconfig.json, and it is sure enough to open it. Modify the type directly as follows:

"types": ["vite/client", "jest", "node","element-plus/global"]

The problem is solved, and the page looks a lot more comfortable.

Attached tsconfig.json file:

{
    
    
    "compilerOptions": {
    
    
        "sourceMap": true,
        "strict": true,
        "module": "esnext",
        "target": "es6",
        "jsx": "preserve",
        "importHelpers": true,
        "experimentalDecorators": true,
        "strictFunctionTypes": false,
        "skipLibCheck": true,
        "moduleResolution": "node",
        "isolatedModules": true,
        "allowSyntheticDefaultImports": true,
        "forceConsistentCasingInFileNames": true,
        "allowJs": false,
        "resolveJsonModule": true,
        "incremental": true,
        "baseUrl": ".",
        "paths": {
    
    
            "/@/*": ["src/*"],
            "/mock/*": ["mock/*"],
            "/server/*": ["server/*"]
        },
        "lib": ["esnext", "dom"],
        "types": ["vite/client", "jest", "node","element-plus/global"],
        "typeRoots": [
            "./node_modules/@types/",
            "./types"],
        "esModuleInterop": true,
        "plugins": [
            {
    
     "name": "@vuedx/typescript-plugin-vue" }
        ]
    },
    "include": [
        "**/*.ts", "**/*.d.ts", "**/*.vue","types/*.d.ts","mock/*.ts","vite.config.ts"
    ],
    "exclude": [
        "node_modules",
        "dist",
        "**/*.js"
    ]
}

Other solutions:

Several friends also encountered this kind of problem. The above method was unsuccessful, and finally other methods were used to solve it.