feat(vite): upgrade to vite 4 (#9238)

package.json

@@ -36,7 +36,7 @@
     "nuxt": "workspace:*",
     "nuxt3": "workspace:nuxt@*",
     "unbuild": "^1.0.2",
-    "vite": "^3.2.5",
+    "vite": "^4.0.0",
     "vue": "3.2.45"
   },
   "devDependencies": {
@@ -72,7 +72,7 @@
     "typescript": "^4.9.4",
     "ufo": "^1.0.1",
     "unbuild": "^1.0.2",
-    "vite": "^3.2.5",
+    "vite": "^4.0.0",
     "vitest": "^0.25.7",
     "vue-tsc": "^1.0.13"
   },

packages/nuxt/package.json

@@ -61,7 +61,7 @@
     "knitwork": "^1.0.0",
     "magic-string": "^0.27.0",
     "mlly": "^1.0.0",
-    "nitropack": "^1.0.0",
+    "nitropack": "npm:nitropack-edge@2.0.0-27847479.5831707",
     "nuxi": "3.0.0",
     "ohash": "^1.0.0",
     "ofetch": "^1.0.0",

packages/nuxt/src/app/components/layout.ts

@@ -77,7 +77,12 @@ export default defineComponent({
 
       // We avoid rendering layout transition if there is no layout to render
       return _wrapIf(Transition, hasLayout && transitionProps, {
-        default: () => _wrapIf(LayoutLoader, hasLayout && { key: layout.value, name: layout.value, hasTransition: process.dev ? !!transitionProps : undefined, ...context.attrs }, context.slots).default()
+        default: () => _wrapIf(LayoutLoader, hasLayout && {
+          key: layout.value,
+          name: layout.value,
+          ...(process.dev ? { hasTransition: !!transitionProps } : {}),
+          ...context.attrs
+        }, context.slots).default()
       }).default()
     }
   }

packages/nuxt/src/core/nitro.ts

@@ -91,7 +91,6 @@ export async function initNitro (nuxt: Nuxt & { _nitro?: Nitro }) {
       ...nuxt.options.experimental.externalVue
         ? {}
         : {
-
             'vue/compiler-sfc': 'vue/compiler-sfc',
             'vue/server-renderer': 'vue/server-renderer',
             vue: await resolvePath(`vue/dist/vue.cjs${nuxt.options.dev ? '' : '.prod'}.js`)
@@ -121,6 +120,7 @@ export async function initNitro (nuxt: Nuxt & { _nitro?: Nitro }) {
       __VUE_PROD_DEVTOOLS__: false
     },
     rollupConfig: {
+      output: {},
       plugins: []
     }
   })
@@ -141,6 +141,8 @@ export async function initNitro (nuxt: Nuxt & { _nitro?: Nitro }) {
   }
 
   // Register nuxt protection patterns
+  nitroConfig.rollupConfig!.plugins = await nitroConfig.rollupConfig!.plugins || []
+  nitroConfig.rollupConfig!.plugins = Array.isArray(nitroConfig.rollupConfig!.plugins) ? nitroConfig.rollupConfig!.plugins : [nitroConfig.rollupConfig!.plugins]
   nitroConfig.rollupConfig!.plugins!.push(
     ImportProtectionPlugin.rollup({
       rootDir: nuxt.options.rootDir,

packages/schema/package.json

@@ -17,10 +17,10 @@
     "@types/lodash.template": "^4",
     "@types/semver": "^7",
     "@unhead/schema": "^1.0.13",
-    "@vitejs/plugin-vue": "^3.2.0",
+    "@vitejs/plugin-vue": "^4.0.0",
-    "nitropack": "^1.0.0",
+    "nitropack": "npm:nitropack-edge@2.0.0-27847479.5831707",
     "unbuild": "latest",
-    "vite": "~3.2.5"
+    "vite": "~4.0.0"
   },
   "dependencies": {
     "c12": "^1.1.0",

packages/vite/package.json

@@ -21,8 +21,8 @@
   "dependencies": {
     "@nuxt/kit": "3.0.0",
     "@rollup/plugin-replace": "^5.0.1",
-    "@vitejs/plugin-vue": "^3.2.0",
+    "@vitejs/plugin-vue": "^4.0.0",
-    "@vitejs/plugin-vue-jsx": "^2.1.1",
+    "@vitejs/plugin-vue-jsx": "^3.0.0",
     "autoprefixer": "^10.4.13",
     "chokidar": "^3.5.3",
     "cssnano": "^5.1.14",
@@ -44,11 +44,11 @@
     "postcss": "^8.4.20",
     "postcss-import": "^15.1.0",
     "postcss-url": "^10.1.3",
-    "rollup": "^2.79.1",
+    "rollup": "^3.7.3",
     "rollup-plugin-visualizer": "^5.8.3",
     "ufo": "^1.0.1",
     "unplugin": "^1.0.1",
-    "vite": "~3.2.5",
+    "vite": "~4.0.0",
     "vite-node": "^0.25.7",
     "vite-plugin-checker": "^0.5.2",
     "vue-bundle-renderer": "^1.0.0"

packages/vite/src/server.ts

@@ -83,10 +83,10 @@ export async function buildServer (ctx: ViteBuildContext) {
         external: ['#internal/nitro', ...ctx.nuxt.options.experimental.externalVue ? ['vue', 'vue-router'] : []],
         output: {
           entryFileNames: 'server.mjs',
-          preferConst: true,
+          format: 'module',
-          // TODO: https://github.com/vitejs/vite/pull/8641
+          generatedCode: {
-          inlineDynamicImports: !ctx.nuxt.options.experimental.viteServerDynamicImports,
+            constBindings: true
-          format: 'module'
+          }
         },
         onwarn (warning, rollupWarn) {
           if (warning.code && ['UNUSED_EXTERNAL_IMPORT'].includes(warning.code)) {

test/bundle.test.ts

@@ -26,7 +26,7 @@ describe.skipIf(isWindows)('minimal nuxt application', () => {
 
   it('default client bundle size', async () => {
     stats.client = await analyzeSizes('**/*.js', publicDir)
-    expect(stats.client.totalBytes).toBeLessThan(110000)
+    expect(stats.client.totalBytes).toBeLessThan(108000)
     expect(stats.client.files.map(f => f.replace(/\..*\.js/, '.js'))).toMatchInlineSnapshot(`
       [
         "_nuxt/composables.js",
@@ -40,7 +40,7 @@ describe.skipIf(isWindows)('minimal nuxt application', () => {
 
   it('default server bundle size', async () => {
     stats.server = await analyzeSizes(['**/*.mjs', '!node_modules'], serverDir)
-    expect(stats.server.totalBytes).toBeLessThan(120000)
+    expect(stats.server.totalBytes).toBeLessThan(90000)
 
     const modules = await analyzeSizes('node_modules/**/*', serverDir)
     expect(modules.totalBytes).toBeLessThan(2700000)