onebay/vite-plugin-imp

antd-vue, Popconfirm, throw 'Failed to resolve import "ant-design-vue/es/popconfirm/style/index.css". Does the file exist?'

Closed this issue · 2 comments

imzbf commented

whole error msg

12:09:55 PM [vite] Internal server error: Failed to resolve import "ant-design-vue/es/popconfirm/style/index.css". Does the file exist?
Plugin: vite:import-analysis
File: /Users/zbf/workspace/web/project/vue3-admin/src/views/Login/index.tsx
2 | import 'ant-design-vue/es/checkbox/style/index.css'
3 | import 'ant-design-vue/es/button/style/index.css'
4 | import 'ant-design-vue/es/popconfirm/style/index.css'
| ^
5 | import { isVNode as _isVNode, createVNode as _createVNode, createTextVNode as _createTextVNode } from "vue";
6 | import { reactive, defineComponent } from 'vue';
at formatError (/Users/zbf/workspace/web/project/vue3-admin/node_modules/vite/dist/node/chunks/dep-dee4e734.js:53624:46)
at TransformContext.error (/Users/zbf/workspace/web/project/vue3-admin/node_modules/vite/dist/node/chunks/dep-dee4e734.js:53620:19)
at normalizeUrl (/Users/zbf/workspace/web/project/vue3-admin/node_modules/vite/dist/node/chunks/dep-dee4e734.js:46462:26)
at async TransformContext.transform (/Users/zbf/workspace/web/project/vue3-admin/node_modules/vite/dist/node/chunks/dep-dee4e734.js:46599:57)
at async Object.transform (/Users/zbf/workspace/web/project/vue3-admin/node_modules/vite/dist/node/chunks/dep-dee4e734.js:53840:30)
at async transformRequest (/Users/zbf/workspace/web/project/vue3-admin/node_modules/vite/dist/node/chunks/dep-dee4e734.js:60394:29)
at async /Users/zbf/workspace/web/project/vue3-admin/node_modules/vite/dist/node/chunks/dep-dee4e734.js:60484:32

Could you provide a minimal reproduce repo?

The reason for this error is that the popcomfirm component lacks style files (index.css)
the config of ant-design-vue fllowing should work.

vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vitePluginImp from 'vite-plugin-imp'

export default defineConfig({
  esbuild: {
    jsxFactory: 'h',
    jsxFragment: 'Fragment',
    jsxInject: `import { h } from 'vue'`
  },
  plugins: [
    vue(),
    vitePluginImp({
      libList: [
        {
          libName: 'ant-design-vue',
          style(name) {
            if (/popconfirm/.test(name)) {
              return `ant-design-vue/es/popover/style/index.css`
            }
            return `ant-design-vue/es/${name}/style/index.css`
          }
        }
      ]
    })
  ]
})