Npm link not linking because of vite

Question

I'm trying to link two applications together. I have two projects. Both projects using Vue(2). One being the main project and the other a componet lib. I succesfully linked the two projects together with npm link. However my main project is giving an error.

ERROR Failed to resolve entry for package "@hitfoyb/my-component-library". The package may have incorrect main/module/exports specified in its package.json: Failed to resolve entry for package "@hitfoyb/my-component-library". The package may have incorrect main/module/exports specified in its package.json.

My main application is using vite and the component application is using webpack.

in my main.js I'm importing it like any other lib

import thqComponentLibrary from "@hitfoyb/my-component-library/dist/MycomponentLibrary.umd";
import "@hitfoyb/my-component-library/dist/MycomponentLibrary.css";

 Vue.use(MycomponentLibrary);

my main application vite.config.js

    optimizeDeps: { 
      include: ['@hitfoyb/my-component-library']
    },

Any help on why the application is giving the error and how do I resolve it?