'/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'