unplugin/unplugin-vue-components

[请指教] 我自定义 NaiveProResolver 一直无法正确自动引入

InfernalAzazel opened this issue · 1 comments

Online display

import { ComponentResolver } from 'unplugin-vue-components'
import * as path from 'node:path'

const componentMap: Record<string, string> = {
  // 例如:组件名称到路径的映射
  'ProQueryForm':  'packages/form/query.vue',
  // 添加更多的组件映射
};


export function NaiveProResolver(): ComponentResolver {
  return {
    type: 'component',
    resolve: (name: string) => {
      const componentPath = componentMap[name];
      console.log(name, componentPath)
      return { name: name, from: componentPath, sideEffects: undefined };
    },
  }
}
import { fileURLToPath, URL } from 'node:url'
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import * as path from 'node:path'
import Components from 'unplugin-vue-components/vite';
import { NaiveUiResolver } from 'unplugin-vue-components/resolvers'
import NaiveProResolver from './packages/resolver'

// https://vitejs.dev/config/
export default defineConfig({
  css: {
    postcss: './postcss.config.js',
  },
  build: {
    // 库模式配置
    lib: {
      // 入口文件
      entry: path.resolve(__dirname, 'packages/index.ts'),
      // ESModule模式
      formats: ['es'],
      // 输出的文件名
      fileName: (format) => `naive-pro-components.${format}.ts`
    },
    rollupOptions: {
      // 外部化处理那些你不想打包进库的依赖
      external: ['vue', 'naive-ui'],
      output: {
        // 为外部化的依赖提供一个全局变量
        globals: {
          vue: 'Vue'
        }
      }
    }
  },
  plugins: [
    vue(),
    Components({
      // dirs: ['packages'],
      // extensions: ['vue'],
      // deep: true,
      // dts: true,
      resolvers: [
        // NaiveUiResolver(),
        NaiveProResolver()
      ],
    }),
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./packages', import.meta.url))
    }
  }
})
  • 错误信息
ProQueryForm packages/form/query.vue
NSpace undefined
18:02:50 [vite] Internal server error: Failed to resolve import "undefined" from "example/components/form/DemoProFormQuery.vue". Does the file exist?
  Plugin: vite:import-analysis
  File: /work/code/github/naive-pro-components/example/components/form/DemoProFormQuery.vue:1:90
  1  |  /* unplugin-vue-components disabled */import { NSpace as __unplugin_components_1 } from 'undefined';
     |                                                                                           ^
  2  |  import { ProQueryForm as __unplugin_components_0 } from 'packages/form/query.vue';
  3  |  import { defineComponent as _defineComponent } from "vue";
      at formatError (file:///work/code/github/naive-pro-components/node_modules/.pnpm/vite@5.2.11_@types+node@20.12.12/node_modules/vite/dist/node/chunks/dep-cNe07EU9.js:50830:46)
      at TransformContext.error (file:///work/code/github/naive-pro-components/node_modules/.pnpm/vite@5.2.11_@types+node@20.12.12/node_modules/vite/dist/node/chunks/dep-cNe07EU9.js:50824:19)
      at normalizeUrl (file:///work/code/github/naive-pro-components/node_modules/.pnpm/vite@5.2.11_@types+node@20.12.12/node_modules/vite/dist/node/chunks/dep-cNe07EU9.js:66128:33)
      at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
      at async file:///work/code/github/naive-pro-components/node_modules/.pnpm/vite@5.2.11_@types+node@20.12.12/node_modules/vite/dist/node/chunks/dep-cNe07EU9.js:66283:47
      at async Promise.all (index 0)
      at async TransformContext.transform (file:///work/code/github/naive-pro-components/node_modules/.pnpm/vite@5.2.11_@types+node@20.12.12/node_modules/vite/dist/node/chunks/dep-cNe07EU9.js:66204:13)
      at async Object.transform (file:///work/code/github/naive-pro-components/node_modules/.pnpm/vite@5.2.11_@types+node@20.12.12/node_modules/vite/dist/node/chunks/dep-cNe07EU9.js:51139:30)
      at async loadAndTransform (file:///work/code/github/naive-pro-components/node_modules/.pnpm/vite@5.2.11_@types+node@20.12.12/node_modules/vite/dist/node/chunks/dep-cNe07EU9.js:53894:29)
18:02:50 [vite] Pre-transform error: Failed to resolve import "undefined" from "example/components/form/DemoProFormQuery.vue". Does the file exist?
node:internal/validators:162
    throw new ERR_INVALID_ARG_TYPE(name, 'string', value);
          ^

TypeError [ERR_INVALID_ARG_TYPE]: The "path" argument must be of type string. Received undefined
    at validateString (node:internal/validators:162:11)
    at isAbsolute (node:path:1160:5)
    at stringifyComponentInfo (file:///work/code/github/naive-pro-components/node_modules/.pnpm/unplugin-vue-components@0.27.0_vue@3.4.27/node_modules/unplugin-vue-components/dist/chunk-TSU3OFN5.js:182:19)
    at file:///work/code/github/naive-pro-components/node_modules/.pnpm/unplugin-vue-components@0.27.0_vue@3.4.27/node_modules/unplugin-vue-components/dist/chunk-TSU3OFN5.js:188:30
    at Array.map (<anonymous>)
    at stringifyComponentsInfo (file:///work/code/github/naive-pro-components/node_modules/.pnpm/unplugin-vue-components@0.27.0_vue@3.4.27/node_modules/unplugin-vue-components/dist/chunk-TSU3OFN5.js:188:16)
    at getDeclarationImports (file:///work/code/github/naive-pro-components/node_modules/.pnpm/unplugin-vue-components@0.27.0_vue@3.4.27/node_modules/unplugin-vue-components/dist/chunk-TSU3OFN5.js:192:21)
    at getDeclaration (file:///work/code/github/naive-pro-components/node_modules/.pnpm/unplugin-vue-components@0.27.0_vue@3.4.27/node_modules/unplugin-vue-components/dist/chunk-TSU3OFN5.js:213:19)
    at writeDeclaration (file:///work/code/github/naive-pro-components/node_modules/.pnpm/unplugin-vue-components@0.27.0_vue@3.4.27/node_modules/unplugin-vue-components/dist/chunk-TSU3OFN5.js:250:16) {
  code: 'ERR_INVALID_ARG_TYPE'
}

Node.js v20.10.0
 ELIFECYCLE  Command failed with exit code 1.
  • 目录
    image

请问如何解决的