After vite+ts+element-plus is imported on demand and the ElMessage component is referenced, an error occurs or the style is lost.

Error reporting

After on-demand import, an error occurs when using ElMessage:

Click "Quick Fix" to view the solution.

Solution tip:

After adding manual import, the error disappears:

import {
    
     ElMessage } from 'element-plus'

However, after manual import, the component style is invalid, as follows:

Solution 1: After manual import, introduce the style file of the ElMessage component

The style file of the ElMessage component can be referenced in the "main.ts" file

import 'element-plus/es/components/message/style/css'

as follows:

The normal display effect is as follows:

Solution 2: Modify the eslintrc configuration

① Add configuration to “ vite.config.ts ” file:

AutoImport({
    
    
      // 增加 eslintrc，自动生成 .eslintrc-auto-import.json 文件
      eslintrc: {
    
    
        enabled: true
      },
      // 、、、
    }),

The ".eslintrc-auto-import.json" file is automatically generated after saving.

② ".eslintrc.cjs" Add configuration:

'extends': [
    // 、、、
    './.eslintrc-auto-import.json'
  ],
  rules: {
    
    
    'no-undef': 0
  },

③ Add "./auto-imports.d.ts" to the "include" configuration in the "tsconfig.app.json" file

"include": ["./auto-imports.d.ts"],

As follows:

After configuring the above files, check the page and introduce the ElMessage component. The style is normal, but the error in the vscode editor may not disappear immediately. Close vscode and reopen it, and the error will disappear.