refactor(cli,schema): add bundler module resolution flag (#22142)

packages/nuxi/src/utils/prepare.ts

@@ -14,9 +14,9 @@ export const writeTypes = async (nuxt: Nuxt) => {
       jsx: 'preserve',
       target: 'ESNext',
       module: 'ESNext',
-      moduleResolution: 'Node',
+      moduleResolution: nuxt.options.experimental.typescriptBundlerResolution ? 'Bundler' : 'Node',
       skipLibCheck: true,
-      strict: nuxt.options.typescript?.strict ?? false,
+      strict: nuxt.options.typescript?.strict ?? true,
       allowJs: true,
       // TODO: remove by default in 3.7
       baseUrl: nuxt.options.srcDir,

packages/nuxt/src/core/nitro.ts

@@ -37,6 +37,7 @@ export async function initNitro (nuxt: Nuxt & { _nitro?: Nitro }) {
     console.warn(`[nuxt] Could not load custom \`spaLoadingTemplate\` path as it does not exist: \`${spaLoadingTemplate}\`.`)
   }
 
+  // @ts-expect-error `typescriptBundlerResolution` coming in next nitro version
   const nitroConfig: NitroConfig = defu(_nitroConfig, {
     debug: nuxt.options.debug,
     rootDir: nuxt.options.rootDir,
@@ -44,6 +45,10 @@ export async function initNitro (nuxt: Nuxt & { _nitro?: Nitro }) {
     srcDir: nuxt.options.serverDir,
     dev: nuxt.options.dev,
     buildDir: nuxt.options.buildDir,
+    experimental: {
+      // @ts-expect-error `typescriptBundlerResolution` coming in next nitro version
+      typescriptBundlerResolution: nuxt.options.experimental.typescriptBundlerResolution || nuxt.options.typescript?.tsConfig?.compilerOptions?.moduleResolution?.toLowercase() === 'bundler' || _nitroConfig.typescript?.tsConfig?.compilerOptions?.moduleResolution?.toLowercase() === 'bundler'
+    },
     imports: {
       autoImport: nuxt.options.imports.autoImport as boolean,
       imports: [

packages/schema/src/config/experimental.ts

@@ -147,6 +147,27 @@ export default defineUntypedSchema({
      */
     configSchema: true,
 
+    /**
+     * This enables 'Bundler' module resolution mode for TypeScript, which is the recommended setting
+     * for frameworks like Nuxt and Vite.
+     *
+     * It improves type support when using modern libraries with `exports`.
+     *
+     * This is only not enabled by default because it could be a breaking change for some projects.
+     *
+     * See https://github.com/microsoft/TypeScript/pull/51669
+     */
+    typescriptBundlerResolution: {
+      async $resolve (val, get) {
+        if (typeof val === 'boolean') { return val }
+        const setting = await get('typescript.tsConfig.compilerOptions.moduleResolution')
+        if (setting) {
+          return setting.toLowerCase() === 'bundler'
+        }
+        return false
+      }
+    },
+
     /**
      * Whether or not to add a compatibility layer for modules, plugins or user code relying on the old
      * `@vueuse/head` API.

packages/schema/src/config/typescript.ts

@@ -46,7 +46,7 @@ export default defineUntypedSchema({
 
     /**
      * You can extend generated `.nuxt/tsconfig.json` using this option.
-     * @type {typeof import('pkg-types')['readPackageJSON']}
+     * @type {typeof import('pkg-types')['TSConfig']}
      */
     tsConfig: {},
 

test/fixtures/basic-types/nuxt.config.ts

@@ -2,15 +2,8 @@ import { addTypeTemplate } from 'nuxt/kit'
 
 export default defineNuxtConfig({
   experimental: {
-    typedPages: true
+    typedPages: true,
-  },
+    typescriptBundlerResolution: process.env.MODULE_RESOLUTION === 'bundler'
-  typescript: {
-    strict: true,
-    tsConfig: {
-      compilerOptions: {
-        moduleResolution: process.env.MODULE_RESOLUTION
-      }
-    }
   },
   buildDir: process.env.NITRO_BUILD_DIR,
   builder: process.env.TEST_BUILDER as 'webpack' | 'vite' ?? 'vite',