Error occurs when from npm and not when in local: vite directory import is not supported resolving es modules imported from

Question

I checked this error on the web and specifically for vite, and although it seems like a common discussion, I don't understand why it doesn't work on my case:

I tried to import my package locally like follows:

package.json

"dependencies": {
    "@sveltejs/adapter-node": "1.3.1",
    "@tsconfig/svelte": "^5.0.2",
    "preline": "^1.9.0",
    "user-credits": "link:..\\UserCredits"
}

Everything works fine, dependencies are resolved: when I run vite dev

Then I copied my entire project to another folder, and imported my npm version of the project:

"dependencies": {
    "@sveltejs/adapter-node": "1.3.1",
    "@tsconfig/svelte": "^5.0.2",
    "preline": "^1.9.0",
    "user-credits": "0.9.7-alpha"
}

Now when I launch the app, I get:

Directory import 'C:\Users\zhamd\work\user-credits-ui\node_modules\.pnpm\[email protected]\node_modules\user-credits\dist\db\dao' is not supported resolving ES modules imported from C:\Users\zhamd\work\user-credits-ui\node_modules\.pnpm\[email protected]\node_modules\user-credits\dist\index.js
Error [ERR_UNSUPPORTED_DIR_IMPORT]: Directory import 'C:\Users\zhamd\work\user-credits-ui\node_modules\.pnpm\[email protected]\node_modules\user-credits\dist\db\dao' is not supported resolving ES modules imported from C:\Users\zhamd\work\user-credits-ui\node_modules\.pnpm\[email protected]\node_modules\user-credits\dist\index.js
    at new NodeError (node:internal/errors:399:5)
    at finalizeResolution (node:internal/modules/esm/resolve:319:17)
    at moduleResolve (node:internal/modules/esm/resolve:945:10)

So I went to my package json from the first project, and I pointed it to the directory unpacked from npm like follows:

"dependencies": {
    "@sveltejs/adapter-node": "1.3.1",
    "@tsconfig/svelte": "^5.0.2",
    "preline": "^1.9.0",
    "user-credits": "link:..\\user-credits-ui\\node_modules\\.pnpm\\[email protected]\\node_modules\\user-credits"
}

Surprise! everything works fine!

Can someone explain to me please?

The complete package.json is lie follows:

{
    "name": "svelte-user-credits",
    "version": "0.0.1",
    "private": true,
    "scripts": {
        "dev": "vite dev",
        "build": "vite build",
        "preview": "vite preview",
        "test": "npm run test:integration && npm run test:unit",
        "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
        "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
        "lint": "prettier --plugin-search-dir . --check . && eslint .",
        "format": "prettier --plugin-search-dir . --write .",
        "test:integration": "playwright test",
        "test:unit": "vitest"
    },
    "devDependencies": {
        "@playwright/test": "^1.28.1",
        "@sveltejs/adapter-auto": "^2.0.0",
        "@sveltejs/kit": "^1.26.0",
        "@typescript-eslint/eslint-plugin": "^6.0.0",
        "@typescript-eslint/parser": "^6.0.0",
        "autoprefixer": "^10.4.14",
        "eslint": "^8.28.0",
        "eslint-config-prettier": "^8.5.0",
        "eslint-plugin-svelte": "^2.30.0",
        "postcss": "^8.4.24",
        "postcss-load-config": "^4.0.1",
        "prettier": "^2.8.0",
        "prettier-plugin-svelte": "^2.10.1",
        "svelte": "^4.0.5",
        "svelte-check": "^3.4.3",
        "tailwindcss": "^3.3.2",
        "tslib": "^2.4.1",
        "typescript": "^5.2.2",
        "vite": "^4.4.2",
        "vitest": "^0.32.2"
    },
    "type": "module",
    "dependencies": {
        "@sveltejs/adapter-node": "1.3.1",
        "@tsconfig/svelte": "^5.0.2",
        "preline": "^1.9.0",
        "user-credits": "0.9.7-alpha"
    }
}

I open an issue on the vite repo, and a reproduction is available here (commenting the import in the main file makes the project show again)

NOTE: here's the problematic npm project's github and this is the client's one

Update: Even when I tried to add index to the folder imports, it still didn't resolve:

Cannot find module 'C:\Users\zhamd\work\user-credits-ui\node_modules\.pnpm\[email protected]\node_modules\user-credits\dist\db\dao\index' imported from C:\Users\zhamd\work\user-credits-ui\node_modules\.pnpm\[email protected]\node_modules\user-credits\dist\index.js

** Is it searching for an index.js or index.ts file? Because there's an index.js and and index.d.ts file at C:\Users\zhamd\work\user-credits-ui\node_modules.pnpm\[email protected]\node_modules\user-credits\dist\db\dao\ **

Answer 1

The answer is composed of multiple steps:

1. All type exports must be exported or reexported (eg. in index.ts) as export type

2. All imports must be explicitly imported as types import type.

3. The package.json file must point to the generated types files index:

   {
     "name": "user-credits",
     "author": "Zied Hamdi",
     "type": "module",
     "version": "0.9.10-alpha",
     "license": "MIT",
     "keywords": [
       "user-credits",
       "credit-flow",
       "credits-balance",
       "payment-screens"
     ],
     "description": "user-credits is an open-source library designed to simplify the implementation of pay-as-you-go features in your web or mobile applications. Credit flow is managed locally instead of being sent back and forth to payment platforms as Stripe, in addition, you own your data without paying the price of long development hours.",
     "main": "./dist/index.js",
     "types": "./dist/index.d.ts",
     "module": "./dist/index.js",
     "exports": {
       ".": {
         "import": "./dist/index.js",
         "require": "./dist/index.js"
       }
     },
     "files": [
       "dist"
     ], //...}}
   

At some point, I decided to start from the beginning and read about TS (I'm coming from the Java and Dart world)

So I've read this to realize I had to add type Also, out of despair, I managed to compile my library with vite thanks to this link definitely worth reading. However, the vite.config.ts is outdated, I replaced it with this to get it to work:

// vite.config.ts
import {defineConfig} from 'vite'
import {resolve} from 'path'
import dtsPlugin from "vite-plugin-dts";

// https://vitejs.dev/config/
export default defineConfig({
    plugins: [
        dtsPlugin({
            insertTypesEntry: true,
        }),
    ],
    build: {
        target:'es2020',
        lib: {
            entry: resolve(__dirname, 'src/index.ts'),
            formats: ['es']
        }
    },
    resolve: {
        alias: {
            src: resolve('src/')
        }
    },
})