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\user-credits@0.9.7-alpha\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\user-credits@0.9.7-alpha\node_modules\user-credits\dist\index.js
Error [ERR_UNSUPPORTED_DIR_IMPORT]: Directory import 'C:\Users\zhamd\work\user-credits-ui\node_modules\.pnpm\user-credits@0.9.7-alpha\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\user-credits@0.9.7-alpha\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\\user-credits@0.9.7-alpha\\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\user-credits@0.9.8-alpha\node_modules\user-credits\dist\db\dao\index' imported from C:\Users\zhamd\work\user-credits-ui\node_modules\.pnpm\user-credits@0.9.8-alpha\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\user-credits@0.9.8-alpha\node_modules\user-credits\dist\db\dao\ **
The answer is composed of multiple steps:
All type exports must be exported or reexported (eg. in index.ts) as export type
All imports must be explicitly imported as types import type.
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/')
}
},
})