node.js - Error: Failed to resolve entry for package 'vue-movinglight' in Vite - Need Help Debugging NPM Package

admin管理员组

文章数量:1318988

I have about two years of experience developing with Vue.js, but this is my first time publishing an open-source npm package. Recently, I needed a moving light feature for a project but couldn't find a suitable package, so I decided to create one and publish it.

My package is vue-movinglight. When I tested the example code locally, everything worked fine. However, after publishing it to npm and installing it in a separate project, I encountered the following issue when using it:

// main.ts
import { createApp } from "vue";
import MovingLight from "vue-movinglight";
import "vue-movinglight/dist/style.css";

const app = createApp(App);
app.use(MovingLight);

Running npm run dev produces this error:

8:03:36 AM [vite] Pre-transform error: Failed to resolve entry for package "vue-movinglight". The package may have incorrect main/module/exports specified in its package.json.
  Plugin: vite:import-analysis
  File: C:/Users/dochi/Downloads/1/src/main.js:4:26
  4  |  import MovingLight from "vue-movinglight";
     |                           ^

Here is the package.json for my package (you can also find it on GitHub: package.json):

{
  "name": "vue-movinglight",
  "version": "1.0.1",
  "main": "dist/vue-movinglight.umd.js",
  "module": "dist/vue-movinglight.esm.js",
  "types": "dist/types/index.d.ts",
  "files": ["dist"],
  "peerDependencies": {
    "vue": "^3.3.0"
  },
  ...
}

The project where I tested the package has the following package.json:

{
  "name": "vite-project",
  "private": true,
  "version": "0.0.0",
  "dependencies": {
    "vue": "^3.5.13",
    "vue-movinglight": "^1.0.1"
  },
  ...
}

What I've tried so far:

1. I searched extensively on Google using various keywords, but I couldn't find any solutions specific to this issue.
2. I attempted several changes, including building the package with ES5 compatibility and modifying the main, module, and types fields in the package.json. Unfortunately, none of these attempts resolved the problem.

To help reproduce the issue, I’ve prepared a StackBlitz example where you can test the setup directly.

My questions:

1. Could the issue be related to my build process or how the files are packaged for npm?
2. Are there any specific settings or steps I might have missed when configuring the package?

Since this is my first time publishing an npm package, I might be missing something basic. I would really appreciate your help in identifying the problem and resolving it.

本文标签：