feat(vite): use externality to resolve externals for ssr dev bundler (#1172)

packages/nitro/package.json

@@ -67,7 +67,6 @@
     "ufo": "^0.7.9",
     "unenv": "^0.3.10",
     "unstorage": "^0.2.9",
-    "vue": "3.2.20",
     "vue-bundle-renderer": "^0.3.2",
     "vue-server-renderer": "^2.6.14"
   },
@@ -76,7 +75,16 @@
     "@types/http-proxy": "^1.17.7",
     "@types/node-fetch": "^3.0.2",
     "@types/serve-static": "^1.13.10",
-    "unbuild": "latest"
+    "unbuild": "latest",
+    "vue": "3.2.20"
+  },
+  "peerDependencies": {
+    "vue": "3.2.20"
+  },
+  "peerDependenciesMeta": {
+    "vue": {
+      "optional": true
+    }
   },
   "engines": {
     "node": "^14.16.0 || ^16.11.0"

packages/nitro/src/context.ts

@@ -22,6 +22,7 @@ export interface NitroHooks {
 }
 
 export interface NitroContext {
+  alias: Record<string, string>
   timing: boolean
   inlineDynamicImports: boolean
   minify: boolean
@@ -87,6 +88,7 @@ export type NitroPreset = NitroInput | ((input: NitroInput) => NitroInput)
 
 export function getNitroContext (nuxtOptions: NuxtOptions, input: NitroInput): NitroContext {
   const defaults: NitroContext = {
+    alias: {},
     timing: undefined,
     inlineDynamicImports: undefined,
     minify: undefined,

packages/nitro/src/rollup/config.ts

@@ -55,7 +55,8 @@ export const getRollupConfig = (nitroContext: NitroContext) => {
       '@babel/parser': 'unenv/runtime/mock/proxy',
       '@vue/compiler-core': 'unenv/runtime/mock/proxy',
       '@vue/compiler-dom': 'unenv/runtime/mock/proxy',
-      '@vue/compiler-ssr': 'unenv/runtime/mock/proxy'
+      '@vue/compiler-ssr': 'unenv/runtime/mock/proxy',
+      ...nitroContext.alias
     }
   }
 

packages/vite/package.json

@@ -13,7 +13,8 @@
     "prepack": "unbuild"
   },
   "devDependencies": {
-    "unbuild": "latest"
+    "unbuild": "latest",
+    "vue": "3.2.20"
   },
   "dependencies": {
     "@nuxt/kit": "3.0.0",
@@ -23,6 +24,7 @@
     "chokidar": "^3.5.2",
     "consola": "^2.15.3",
     "defu": "^5.0.0",
+    "externality": "0.1.0",
     "fs-extra": "^10.0.0",
     "magic-string": "^0.25.7",
     "p-debounce": "^4.0.0",
@@ -31,7 +33,9 @@
     "postcss-import-resolver": "^2.0.0",
     "postcss-url": "^10.1.3",
     "ufo": "^0.7.9",
-    "vite": "^2.6.10",
+    "vite": "^2.6.10"
+  },
+  "peerDependencies": {
     "vue": "3.2.20"
   },
   "engines": {

packages/vite/src/dev-bundler.ts

@@ -1,7 +1,6 @@
-import { builtinModules } from 'module'
 import { pathToFileURL } from 'url'
-import { join } from 'pathe'
 import * as vite from 'vite'
+import { ExternalsOptions, isExternal as _isExternal, ExternalsDefaults } from 'externality'
 import { hashId, uniq } from './utils'
 
 export interface TransformChunk {
@@ -23,25 +22,28 @@ export interface TransformOptions {
 }
 
 function isExternal (opts: TransformOptions, id: string) {
-  if (builtinModules.includes(id)) {
-    return true
-  }
-
+  // Externals
   const ssrConfig = (opts.viteServer.config as any).ssr
 
-  if (!/\.[cm]?js/.test(id)) {
-    return false
+  const externalOpts: ExternalsOptions = {
+    inline: [
+      /virtual:/,
+      /\.ts$/,
+      // Things like '~', '@', etc.
+      ...Object.keys(opts.viteServer.config.resolve.alias),
+      ...ExternalsDefaults.inline,
+      ...ssrConfig.noExternal
+    ],
+    external: [
+      ...ssrConfig.external,
+      /node_modules/
+    ],
+    resolve: {
+      type: 'module',
+      extensions: ['.ts', '.js', '.json', '.vue', '.mjs', '.jsx', '.tsx', '.wasm']
+    }
   }
-
-  if (ssrConfig.noExternal.find(ext => id.includes(ext))) {
-    return false
-  }
-
-  if (ssrConfig.external.find(ext => id.includes(ext))) {
-    return true
-  }
-
-  return id.includes('node_modules')
+  return _isExternal(id, opts.viteServer.config.root, externalOpts)
 }
 
 async function transformRequest (opts: TransformOptions, id: string) {
@@ -53,14 +55,14 @@ async function transformRequest (opts: TransformOptions, id: string) {
     id = id.slice('/@id/'.length)
   }
   if (id && id.startsWith('/@fs/')) {
+    // Absolute path
     id = id.slice('/@fs'.length)
-  }
-  if (id.startsWith('/node_modules')) {
-    id = join(opts.viteServer.config.root, id)
+  } else if (!id.includes('entry') && id.startsWith('/')) {
+    // Relative to the root directory
+    id = '.' + id
   }
 
-  // Externals
-  if (isExternal(opts, id)) {
+  if (await isExternal(opts, id)) {
     return {
       code: `(global, exports, importMeta, ssrImport, ssrDynamicImport, ssrExportAll) => import('${(pathToFileURL(id))}').then(r => { ssrExportAll(r) })`,
       deps: [],

packages/vite/src/server.ts

@@ -40,15 +40,15 @@ export async function buildServer (ctx: ViteBuildContext) {
     ssr: {
       external: [],
       noExternal: [
-        ...ctx.nuxt.options.build.transpile.filter(i => typeof i === 'string'),
-        '.vue',
+        ...ctx.nuxt.options.build.transpile,
+        /\\.vue$/,
         'plugin-vue:',
         '/__vue-jsx',
         '#app',
-        'nuxt3/dist',
-        'nuxt3/src',
-        '@nuxt/nitro/dist',
-        '@nuxt/nitro/src'
+        /nuxt3\/dist/,
+        /nuxt3\/src/,
+        /@nuxt\/nitro\/dist/,
+        /@nuxt\/nitro\/src/
       ]
     },
     build: {

packages/webpack/package.json

@@ -46,7 +46,6 @@
     "time-fix-plugin": "^2.0.7",
     "ufo": "^0.7.9",
     "url-loader": "^4.1.1",
-    "vue": "3.2.20",
     "vue-loader": "^16.8.1",
     "vue-style-loader": "^4.1.3",
     "webpack": "^5.58.2",
@@ -63,7 +62,11 @@
     "@types/webpack-dev-middleware": "^5.0.2",
     "@types/webpack-hot-middleware": "^2.25.5",
     "@types/webpack-virtual-modules": "^0",
-    "unbuild": "latest"
+    "unbuild": "latest",
+    "vue": "3.2.20"
+  },
+  "peerDependencies": {
+    "vue": "3.2.20"
   },
   "engines": {
     "node": "^14.16.0 || ^16.11.0"

yarn.lock

@@ -2684,6 +2684,11 @@ __metadata:
     vue: 3.2.20
     vue-bundle-renderer: ^0.3.2
     vue-server-renderer: ^2.6.14
+  peerDependencies:
+    vue: 3.2.20
+  peerDependenciesMeta:
+    vue:
+      optional: true
   languageName: unknown
   linkType: soft
 
@@ -2800,6 +2805,7 @@ __metadata:
     chokidar: ^3.5.2
     consola: ^2.15.3
     defu: ^5.0.0
+    externality: 0.1.0
     fs-extra: ^10.0.0
     magic-string: ^0.25.7
     p-debounce: ^4.0.0
@@ -2811,6 +2817,8 @@ __metadata:
     unbuild: latest
     vite: ^2.6.10
     vue: 3.2.20
+  peerDependencies:
+    vue: 3.2.20
   languageName: unknown
   linkType: soft
 
@@ -2901,6 +2909,8 @@ __metadata:
     webpack-hot-middleware: ^2.25.1
     webpack-virtual-modules: ^0.4.3
     webpackbar: ^5.0.0-3
+  peerDependencies:
+    vue: 3.2.20
   languageName: unknown
   linkType: soft
 
@@ -4734,6 +4744,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"allowlist@npm:^0.1.1":
+  version: 0.1.1
+  resolution: "allowlist@npm:0.1.1"
+  checksum: 9e4894e8e52cfae74bdfb726895f1bb81f13e1ddf4419773224ca5f84efe9ef089c91abe2c1bd9933ca0c4f1e1d249e629dc60c8e805328de649121a649a5572
+  languageName: node
+  linkType: hard
+
 "alphanum-sort@npm:^1.0.0, alphanum-sort@npm:^1.0.2":
   version: 1.0.2
   resolution: "alphanum-sort@npm:1.0.2"
@@ -9408,6 +9425,18 @@ __metadata:
   languageName: node
   linkType: hard
 
+"externality@npm:0.1.0":
+  version: 0.1.0
+  resolution: "externality@npm:0.1.0"
+  dependencies:
+    allowlist: ^0.1.1
+    enhanced-resolve: ^5.8.3
+    ufo: ^0.7.9
+    upath: ^2.0.1
+  checksum: 3b20136e57ff2c1661c24544ce61adcbce2427e58a43dcd859e5d17ebe379bf125e6ee189bd6ea6ca9aa0476a0ef6550419eb1cde7aa29bff605a24872314097
+  languageName: node
+  linkType: hard
+
 "extglob@npm:^2.0.4":
   version: 2.0.4
   resolution: "extglob@npm:2.0.4"