Vue 3 and Vite Build Resolve Error

[YusufcanY]

Versions:

    "vue": "^3.2.24",
    "vite": "^2.7.6",
    "vite-plugin-environment": "^1.1.0",
    "vite-plugin-eslint": "^1.3.0",
    "vite-svg-loader": "^3.1.1"

When I import otp component in vue file, my development is giving this error

$ vite --host --https
 > node_modules/vite/dist/node/chunks/dep-fcec4469.js:30629:10: error: [plugin: vite:dep-scan] Failed to resolve entry for package "vue3-otp-input". The package may have incorrect main/module/exports specified in its package.json: Failed to resolve entry for package "vue3-otp-input". The package may have incorrect main/module/exports specified in its package.json.
    30629 │     throw new Error(`Failed to resolve entry for package "${id}". ` +
          ╵           ^
    at packageEntryFailure (/home/bixos/Projects/royal/royal-front/node_modules/vite/dist/node/chunks/dep-fcec4469.js:30629:11)
    at resolvePackageEntry (/home/bixos/Projects/royal/royal-front/node_modules/vite/dist/node/chunks/dep-fcec4469.js:30625:9)
    at tryNodeResolve (/home/bixos/Projects/royal/royal-front/node_modules/vite/dist/node/chunks/dep-fcec4469.js:30440:20)
    at Context.resolveId (/home/bixos/Projects/royal/royal-front/node_modules/vite/dist/node/chunks/dep-fcec4469.js:30257:28)
    at Object.resolveId (/home/bixos/Projects/royal/royal-front/node_modules/vite/dist/node/chunks/dep-fcec4469.js:42784:55)
    at processTicksAndRejections (internal/process/task_queues.js:97:5)
    at async resolve (/home/bixos/Projects/royal/royal-front/node_modules/vite/dist/node/chunks/dep-fcec4469.js:42987:26)
    at async /home/bixos/Projects/royal/royal-front/node_modules/vite/dist/node/chunks/dep-fcec4469.js:43125:34
    at async callback (/home/bixos/Projects/royal/royal-front/node_modules/esbuild/lib/main.js:832:28)
    at async handleRequest (/home/bixos/Projects/royal/royal-front/node_modules/esbuild/lib/main.js:664:30)

   node_modules/vite/dist/node/chunks/dep-fcec4469.js:43115:18: note: This error came from the "onResolve" callback registered here
    43115 │             build.onResolve({
          ╵                   ~~~~~~~~~
    at setup (/home/bixos/Projects/royal/royal-front/node_modules/vite/dist/node/chunks/dep-fcec4469.js:43115:19)
    at handlePlugins (/home/bixos/Projects/royal/royal-front/node_modules/esbuild/lib/main.js:756:23)
    at Object.buildOrServe (/home/bixos/Projects/royal/royal-front/node_modules/esbuild/lib/main.js:1044:7)
    at /home/bixos/Projects/royal/royal-front/node_modules/esbuild/lib/main.js:1895:17
    at new Promise (<anonymous>)
    at Object.build (/home/bixos/Projects/royal/royal-front/node_modules/esbuild/lib/main.js:1894:14)
    at Object.build (/home/bixos/Projects/royal/royal-front/node_modules/esbuild/lib/main.js:1749:51)
    at /home/bixos/Projects/royal/royal-front/node_modules/vite/dist/node/chunks/dep-fcec4469.js:42945:54
    at Array.map (<anonymous>)

   local-script:/home/bixos/Projects/royal/royal-front/src/components/account/wallet/WithdrawItem.vue:3:22: note: The plugin "vite:dep-scan" was triggered by this import
        3 │ import VOtpInput from 'vue3-otp-input';
          ╵                       ~~~~~~~~~~~~~~~~

error when starting dev server:
Error: Build failed with 1 error:
node_modules/vite/dist/node/chunks/dep-fcec4469.js:30629:10: error: [plugin: vite:dep-scan] Failed to resolve entry for package "vue3-otp-input". The package may have incorrect main/module/exports specified in its package.json: Failed to resolve entry for package "vue3-otp-input". The package may have incorrect main/module/exports specified in its package.json.
    at failureErrorWithLog (/home/bixos/Projects/royal/royal-front/node_modules/esbuild/lib/main.js:1493:15)
    at /home/bixos/Projects/royal/royal-front/node_modules/esbuild/lib/main.js:1151:28
    at runOnEndCallbacks (/home/bixos/Projects/royal/royal-front/node_modules/esbuild/lib/main.js:941:63)
    at buildResponseToResult (/home/bixos/Projects/royal/royal-front/node_modules/esbuild/lib/main.js:1149:7)
    at /home/bixos/Projects/royal/royal-front/node_modules/esbuild/lib/main.js:1258:14
    at /home/bixos/Projects/royal/royal-front/node_modules/esbuild/lib/main.js:629:9
    at handleIncomingPacket (/home/bixos/Projects/royal/royal-front/node_modules/esbuild/lib/main.js:726:9)
    at Socket.readFromStdout (/home/bixos/Projects/royal/royal-front/node_modules/esbuild/lib/main.js:596:7)
    at Socket.emit (events.js:314:20)
    at addChunk (_stream_readable.js:297:12)

[YusufcanY]

@ejirocodes

[YusufcanY]

@nimaebra

[Niputi]

ref: vitejs/vite#7051
later version of vite give a bit clearer error message

these

  "browser": "dist/vue3-otp-input.esm.js",
  "module": "dist/vue3-otp-input.esm.js",

would need to look like

  "browser": "dist/vue3-otp-input.esm.mjs",
  "module": "dist/vue3-otp-input.esm.mjs"

or include a new field like this

"type" :  "module"

[YusufcanY]

#5

[ejirocodes]

@YusufcanY, @Niputi, I've fixed this and tried it on a fresh Vue 3, Vite project and it works fine. Please uninstall and install the latest version on npm