I was trying to import Vue-Socials into my project so I could use social media logos.

However, even when I've downloaded the package through npm multiple times, it's throwing me this error:

Internal server error: Failed to resolve entry for package "vue-socials".
The package may have incorrect main/module/exports specified in its package.json: Failed to resolve entry for package "vue-socials".
The package may have incorrect main/module/exports specified in its package.json.

I tried to look around in the package.json, but I understood nothing (I could attach the package.json of the library here and I might possibly need to).

CodePudding user response：

That error occurs when one of the package's entries points to a non-existent file (as seen in this Vite issue).

Looking at vue-socials's package.json, notice the browser entry is ./dist/vue-socials.esm.js, but the file under dist is actually named vue-socials.es.js (without the m).

A workaround is to alias vue-socials to the correct path:

// vite.config.js
import { defineConfig } from 'vite'

export default defineConfig({
  resolve: {
    alias: {
      'vue-socials': 'vue-socials/dist/vue-socials.es.js',