vuetify
vuetify copied to clipboard
[Feature Request] Add support for moduleResolution: NodeNext in v3
Problem to solve
When using moduleResolution: NodeNext
in tsconfig.json
the exports
field is used for imports and types. So package.json
must have types
fields in the exports
field. And the type definition files need to have .d.mts extension when using .mjs files.
Proposed solution
Change the build to produce .d.mts
definition files or change to .js
files instead of .mjs
. And change package.json
exports
to something like the following:
"exports": {
".": {
"import": {
"types": "./lib/index.d.mts",
"default": "./lib/framework.mjs"
},
"require": {
"types": "./dist/vuetify.d.ts",
"default": "./dist/vuetify.js"
}
},
"./styles": "./lib/styles/main.css",
"./styles/*": "./lib/styles/*",
"./framework": {
"types": "./lib/index.d.mts",
"default": "./lib/framework.mjs"
},
"./blueprints": {
"types": "./lib/blueprints/index.d.mts",
"default": "./lib/blueprints/index.mjs"
},
"./blueprints/*": {
"types": "./lib/blueprints/*.d.mts",
"default": "./lib/blueprints/*.mjs"
},
"./components": {
"types": "./lib/components/index.d.mts",
"default": "./lib/components/index.mjs"
},
"./components/*": {
"types": "./lib/components/*/index.d.mts",
"default": "./lib/components/*/index.mjs"
},
"./directives": {
"types": "./lib/directives/index.d.mts",
"default": "./lib/directives/index.mjs"
},
"./directives/*": "./lib/directives/*/*.mjs",
"./locale": {
"types": "./lib/locale/index.d.mts",
"default": "./lib/locale/index.mjs"
},
"./locale/adapters/*": {
"types": "./lib/locale/adapters/*.d.mts",
"default": "./lib/locale/adapters/*.mjs"
},
"./iconsets/*": {
"types": "./lib/iconsets/*.d.mts",
"default": "./lib/iconsets/*.mjs"
},
"./*": "./*"
},
Ideally, support it in v2 as well! A similar "exports" object would work for that as well.
Note that adding the exports
field in package.json
doesn't just effect TypeScript, it will also effect Node ESM. And as such may be a breaking change. Also, a solution that works for TypeScript doesn't necessarily work for Node ESM as well. So testing will be required for different types of consumer projects.
Another note: I have read in one of the TypeScript docs that the types
field needs to on top. Though that doesn't always seem to be the case in my personal experience.
Also relevant upstream issue at TypeScript: microsoft/TypeScript#50058
Yeah we probably won't be adding it in v2 because even just "./*": "./*"
may have different behaviour. This will require a fair bit of testing as there are a lot of possible combinations of bundlers, runtime environments, typescript versions, and tsc options.
Any news on this? Using bundler resolution in TS 5.0 as Evan You suggested for vite, results in .d.mts
definition files being required for .mjs
files. As of right now, all my Vuetify imports fail to resolve types because of this.
Same problem here.
In the vuetfiy/package.json I changed
"./components": "./lib/components/index.mjs",
"./components/*": "./lib/components/*/index.mjs",
to
"./components": {
"types": "./lib/components/index.d.ts",
"default": "./lib/components/index.mjs"
},
"./components/*": {
"types": "./lib/components/*/index.d.ts",
"default": "./lib/components/*/index.mjs"
},
to get it temporarily working.
edit: Hacky but working solution if you are using pnpm:
"pnpm": {
"patchedDependencies": {
"[email protected]": "patches/[email protected]"
}
},
diff --git a/package.json b/package.json
index 31fb911a1328c5b1a8121086f3ad31281c09bf1d..6d572d168f9c120474387dee9e26290a4a2db86a 100755
--- a/package.json
+++ b/package.json
@@ -54,25 +54,62 @@
".": {
"sass": "./lib/styles/main.sass",
"style": "./lib/styles/main.css",
- "default": "./lib/framework.mjs"
+ "default": "./lib/framework.mjs",
+ "types": "./lib/index.d.ts"
},
"./styles": {
"sass": "./lib/styles/main.sass",
"default": "./lib/styles/main.css"
},
"./styles/*": "./lib/styles/*",
- "./framework": "./lib/framework.mjs",
- "./blueprints": "./lib/blueprints/index.mjs",
- "./blueprints/*": "./lib/blueprints/*.mjs",
- "./components": "./lib/components/index.mjs",
- "./components/*": "./lib/components/*/index.mjs",
- "./directives": "./lib/directives/index.mjs",
- "./directives/*": "./lib/directives/*/*.mjs",
- "./locale": "./lib/locale/index.mjs",
- "./locale/adapters/*": "./lib/locale/adapters/*.mjs",
- "./iconsets/*": "./lib/iconsets/*.mjs",
- "./labs/components": "./lib/labs/components.mjs",
- "./labs/*": "./lib/labs/*/index.mjs",
+ "./framework": {
+ "types": "./lib/index.d.ts",
+ "default": "./lib/framework.mjs"
+ },
+ "./blueprints": {
+ "types": "./lib/blueprints/index.d.ts",
+ "default": "./lib/blueprints/index.mjs"
+ },
+ "./blueprints/*": {
+ "types": "./lib/blueprints/*.d.ts",
+ "default": "./lib/blueprints/*.mjs"
+ },
+ "./components": {
+ "types": "./lib/components/index.d.ts",
+ "default": "./lib/components/index.mjs"
+ },
+ "./components/*": {
+ "types": "./lib/components/*/index.d.ts",
+ "default": "./lib/components/*/index.mjs"
+ },
+ "./directives": {
+ "types": "./lib/directives/index.d.ts",
+ "default": "./lib/directives/index.mjs"
+ },
+ "./directives/*": {
+ "types": "./lib/directives/*/*.d.ts",
+ "default": "./lib/directives/*/*.mjs"
+ },
+ "./locale": {
+ "types": "./lib/locale/index.d.ts",
+ "default": "./lib/locale/index.mjs"
+ },
+ "./locale/adapters/*": {
+ "types": "./lib/locale/adapters/*.d.ts",
+ "default": "./lib/locale/adapters/*.mjs"
+ },
+ "./iconsets/*": {
+ "types": "./lib/iconsets/*.d.ts",
+ "default": "./lib/iconsets/*.mjs"
+ },
+ "./labs/components": {
+ "types": "./lib/labs/components.d.ts",
+ "default": "./lib/labs/components.mjs"
+ },
+ "./labs/*": {
+ "types": "./lib/labs/*.d.ts",
+ "default": "./lib/labs/*.mjs"
+ },
"./*": "./*"
},
"typesVersions": {