[Feature Request] Add support for moduleResolution: NodeNext in v3

[viell-dev]

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"
    },
    "./*": "./*"
  },

[ZachHaber]

Ideally, support it in v2 as well! A similar "exports" object would work for that as well.

[viell-dev]

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

[KaelWD]

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.

[josh-hemphill]

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.

[ml1nk]

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": {
            "vuetify@3.1.11": "patches/vuetify@3.1.11.patch"
        }
    },

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": {