'/node_modules/.vite/deps/vuetify_lib.js?v=5b28369c' does not provide an export named Vjsf issue

[aloksingh3112]

I was using @koumoul/vjsf library in my project and recently I migrate from weback to vite , I am getting this issue that Vjsf library trying to resolve through vuetify resolver . Not able to find any solution for this

vite.config.js

import { createVuePlugin } from "vite-plugin-vue2"
import Components from "unplugin-vue-components/vite"
import { VuetifyResolver } from "unplugin-vue-components/resolvers"
import resolveExtensionVue from "vite-plugin-resolve-extension-vue"
// import vuetifyLoader from "vite-plugin-vuetify"

import path from "path"

/**
 * @type {import('vite').UserConfig}
 */
export default () => {
    // eslint-disable-next-line
    require("dotenv").config()
    return {
        resolve: {
            extensions: [".mjs", ".js", ".ts", ".jsx", ".tsx", ".json", ".vue"],
            alias: [
                {
                    find: "@/",
                    replacement: `${path.resolve(__dirname, "./src")}/`,
                },
                {
                    find: "src/",
                    replacement: `${path.resolve(__dirname, "./src")}/`,
                },
            ],
        },
        // extensions: [".mjs", ".js", ".ts", ".jsx", ".tsx", ".json", ".vue"],
        plugins: [
            createVuePlugin(),
            resolveExtensionVue(),
            // vuetifyLoader({ autoImport: true }),
            Components({
                resolvers: [VuetifyResolver()],
            }),
        ],
        server: {
            port: 8080,
        },
        define: {
            "process.env": process.env,
        },
    }
}

[azaleta]

your resolvers defination contains VuetifyResolver only, so only VuetifyResolver will work. According to Vuetify Resolver

export function VuetifyResolver(): ComponentResolver {
  return {
    type: 'component',
    resolve: (name: string) => {
      if (name.match(/^V[A-Z]/))
        return { name, from: 'vuetify/lib' }
    },
  }
}

Vjsf could not found in Vuetify lib => get this error

resolve process is the first matching one works

 async findComponent(name: string, type: 'component' | 'directive', excludePaths: string[] = []): Promise<ComponentInfo | undefined> {
    // resolve from fs
    let info = this._componentNameMap[name]
    if (info && !excludePaths.includes(info.from) && !excludePaths.includes(info.from.slice(1)))
      return info

    // custom resolvers
    for (const resolver of this.options.resolvers) {
      if (resolver.type !== type)
        continue

      const result = await resolver.resolve(name)
      if (result) {

so I think you could make your own resolver and put it as the first item something like vite.config.js

Components({
  resolvers: [
    (componentName) => {
      if (componentName.startsWith('Vjsf'))  //do not know the UI lib naming rule
        return { name: componentName, as:componentName, from: '@koumoul\vjsf\lib'}
    },
    VuetifyResolver()
  ],
})

hope it works

[isramos]

That worked for me. Thanks a lot!

I had to do couple minor fixes:

• Capitalization: 'VJsf' instead of 'Vjsf'
• Path: '@koumoul/vjsf' instead '@koumoul\vjsf\lib'