[plugin vite:dep-scan] Failed to resolve entry for package "x". The package may have incorrect main/module/exports specified in its package.json.

[malinhanak]

Versions:
vite@4.1.0
sdk's typescript@4.9.5 (installed globally)
project utilizing sdk typescript@4.8.3

This issue has been haunting me for weeks now and it seems I cannot get passed it. Due to bussiness logic rules I cannot share complete codes but I can share configs and such, I hope this will be enough.

I am writing a SDK in TypeScript, it is going to be used in anything from vanilla JS/TS/React/Vue/Angular project. My small test environment of just a vanilla TS project it works fine, no issue. But as soon as I try to install this SDK in a vite react typescript project it fails.

The SDK is build with microbundle, I have also tried doing a vite build with lib mode and it fails the same way.

I don't know if it helps but this is the files that microbundle produces in dist

Build "@smartrefill/sdk-demo" to dist:
      2.18 kB: index.js.gz
      1.86 kB: index.js.br
      1.99 kB: index.modern.mjs.gz
      1.69 kB: index.modern.mjs.br
      2.16 kB: index.m.js.gz
      1.85 kB: index.m.js.br
      2.26 kB: index.umd.js.gz
      1.95 kB: index.umd.js.br

And this is the package.json of the sdk

{
  "name": "@smartrefill/sdk-demo",
  "version": "1.0.2",
  "main": "dist/index.js",
  "module": "dist/index.m.js",
  "unpkg": "dist/index.umd.js",
  "types": "dist/index.d.ts",
  "typings": "src/index.d.ts",
"exports": {
    "types": "./dist/index.d.ts",
    "require": "./dist/index.js",
    "default": "./dist/index.modern.mjs"
  },
  "publishConfig": {
    "registry": "..."
  },
  "scripts": {
    "build": "rm -rf dist && microbundle --tsconfig tsconfig.json --no-sourcemap",
    "dev": "microbundle --watch --tsconfig tsconfig.json --no-sourcemap",
    "deploy": "cp -v package.json dist && tar -czvf package.tar.gz -C dist . && npm publish package.tar.gz"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "microbundle": "^0.15.1"
  },
  "dependencies": {
    "axios": "^1.3.2",
    "cross-fetch": "^3.1.5",
    "npm": "^9.4.2"
  },
  "description": ""
}

This is the full error I get, it doesn't say anything when I install but when I try to start the dev server this is what happens, and I have tried to so many bundles, so many files extensions in package.json and it's always the same.

Full Error

[ERROR] [plugin vite:dep-scan] Failed to resolve entry for package "@smartrefill/sdk-demo". The package may have incorrect main/module/exports specified in its package.json.

    node_modules/esbuild/lib/main.js:1365:21:
      1365 │         let result = await callback({
           ╵                      ^

    at packageEntryFailure (file:///Users/maha001/Desktop/projects/SDK/test-sdk/node_modules/vite/dist/node/chunks/dep-3007b26d.js:22004:11)
    at resolvePackageEntry (file:///Users/maha001/Desktop/projects/SDK/test-sdk/node_modules/vite/dist/node/chunks/dep-3007b26d.js:22001:5)
    at tryNodeResolve (file:///Users/maha001/Desktop/projects/SDK/test-sdk/node_modules/vite/dist/node/chunks/dep-3007b26d.js:21736:20)
    at Context.resolveId (file:///Users/maha001/Desktop/projects/SDK/test-sdk/node_modules/vite/dist/node/chunks/dep-3007b26d.js:21487:28)
    at Object.resolveId (file:///Users/maha001/Desktop/projects/SDK/test-sdk/node_modules/vite/dist/node/chunks/dep-3007b26d.js:41587:46)
    at processTicksAndRejections (node:internal/process/task_queues:96:5)
    at async resolve (file:///Users/maha001/Desktop/projects/SDK/test-sdk/node_modules/vite/dist/node/chunks/dep-3007b26d.js:41815:26)
    at async file:///Users/maha001/Desktop/projects/SDK/test-sdk/node_modules/vite/dist/node/chunks/dep-3007b26d.js:41989:34
    at async requestCallbacks.on-resolve (/Users/maha001/Desktop/projects/SDK/test-sdk/node_modules/esbuild/lib/main.js:1365:22)
    at async handleRequest (/Users/maha001/Desktop/projects/SDK/test-sdk/node_modules/esbuild/lib/main.js:727:13)

  This error came from the "onResolve" callback registered here:

    node_modules/esbuild/lib/main.js:1287:20:
      1287 │       let promise = setup({
           ╵                     ^

    at setup (file:///Users/maha001/Desktop/projects/SDK/test-sdk/node_modules/vite/dist/node/chunks/dep-3007b26d.js:41979:19)
    at handlePlugins (/Users/maha001/Desktop/projects/SDK/test-sdk/node_modules/esbuild/lib/main.js:1287:21)
    at buildOrServeImpl (/Users/maha001/Desktop/projects/SDK/test-sdk/node_modules/esbuild/lib/main.js:974:5)
    at Object.buildOrServe (/Users/maha001/Desktop/projects/SDK/test-sdk/node_modules/esbuild/lib/main.js:780:5)
    at /Users/maha001/Desktop/projects/SDK/test-sdk/node_modules/esbuild/lib/main.js:2132:17
    at new Promise (<anonymous>)
    at Object.build (/Users/maha001/Desktop/projects/SDK/test-sdk/node_modules/esbuild/lib/main.js:2131:14)
    at build (/Users/maha001/Desktop/projects/SDK/test-sdk/node_modules/esbuild/lib/main.js:1978:51)
    at scanImports (file:///Users/maha001/Desktop/projects/SDK/test-sdk/node_modules/vite/dist/node/chunks/dep-3007b26d.js:41760:11)

  The plugin "vite:dep-scan" was triggered by this import

    src/context/sdk-context.tsx:2:34:
      2 │ import { SmartRefillWebSDK } from '@smartrefill/sdk-demo';

Below you can find the ts configs.
SDK tsconfig.json

{
  "compilerOptions": {
    "module": "commonjs",
    "declaration": true,
    "removeComments": true,
    "esModuleInterop": true,
    "moduleResolution": "node",
    "allowSyntheticDefaultImports": true,
    "target": "ES2017",
    "sourceMap": false,
    "outDir": "./dist",
    "baseUrl": "./",
    "incremental": true
  },
  "include": ["src/**/*"],
  "exclude": ["node_modules", "test", "lib", "**/*spec.ts"]
}

Example app (that fails) tsconfig.json

{
    "compilerOptions": {
        "baseUrl": "src",
        "paths": {
            "@smartrefill/sdk-demo": ["../node_modules/@smartrefill/sdk-demo"]
        },
        "outDir": "./.dist/",
        "noImplicitAny": false,
        "module": "esnext",
        "target": "esnext",
        "allowJs": true,
        "moduleResolution": "Node",
        "declaration": true,
        "esModuleInterop": true,
        "importHelpers": true,
        "inlineSourceMap": false,
        "inlineSources": true,
        "noUnusedLocals": false,
        "noUnusedParameters": true,
        "pretty": true,
        "resolveJsonModule": true,
        "skipLibCheck": true,
        "sourceMap": true,
        "suppressImplicitAnyIndexErrors": true,
        "useDefineForClassFields": false,
        "jsx": "react"
    },
    "include": ["src/**/*"],
    "exclude": ["../node_modules", "**/*.spec.ts"]
}

vanilla ts project tsconfig.json

{
  "compilerOptions": {
    "module": "ESNext",
    "declaration": true,
    "removeComments": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "target": "ES2017",
    "sourceMap": false,
    "outDir": "./dist",
    "baseUrl": "./",
    "incremental": true
  },
  "include": ["src/**/*"],
  "exclude": ["node_modules", "test", "lib", "**/*spec.ts"]
}

Please help me, I have been searching for this for 2 weeks and none of the potential fixes I have found have worked to resolve it.

[malinhanak]

To update this thread I finally solved this by adding a resolve alias to the config pointing to the commonjs package in the node_modules.

resolve: {
    alias: {
      "package name": "package commonjs file path in node_modules",
    },
  },

[JSintrinsiq]

I ran into a similar issue with the @fortawesome/fontawesome-common-types package.

When I checked the package.json for that package it didn't have an "entry" defined, only "types". Makes sense because there was no main .js file, only a .d.ts. That tipped me off that the error was complaining that it couldn't find and resolve an entry file because only a type definition was being provided, so changing my import to import type resolved the issue for me.

I suggest trying:

import type { SmartRefillWebSDK } from '@smartrefill/sdk-demo';

Hope it helps!