From 29171bd1053e24132b3ab23ac50535edde6b2323 Mon Sep 17 00:00:00 2001
From: Daniel Roe <daniel@roe.dev>
Date: Mon, 7 Feb 2022 13:45:47 +0000
Subject: [PATCH] fix: sanitize import filenames in generated imports (#2216)

---
 packages/bridge/package.json                  |  1 +
 packages/bridge/src/vite/templates.ts         | 13 ++++-----
 packages/kit/package.json                     |  1 +
 packages/kit/src/components.ts                |  5 ++--
 packages/kit/src/internal/template.ts         |  7 +++--
 packages/nitro/package.json                   |  1 +
 packages/nitro/src/build.ts                   |  3 +-
 packages/nitro/src/presets/browser.ts         |  7 +++--
 packages/nitro/src/rollup/config.ts           |  3 +-
 packages/nitro/src/rollup/plugins/assets.ts   | 10 +++++--
 .../src/rollup/plugins/dynamic-require.ts     | 13 ++++-----
 .../nitro/src/rollup/plugins/middleware.ts    | 16 ++++++----
 packages/nitro/src/rollup/plugins/storage.ts  |  5 ++--
 packages/nuxt3/package.json                   |  1 +
 packages/nuxt3/src/auto-imports/module.ts     |  3 +-
 packages/nuxt3/src/auto-imports/utils.ts      |  7 +++--
 packages/nuxt3/src/components/loader.ts       |  3 +-
 packages/nuxt3/src/components/templates.ts    | 13 ++++-----
 packages/nuxt3/src/core/templates.ts          | 27 +++++++----------
 packages/nuxt3/src/pages/module.ts            | 29 ++++++++++---------
 packages/nuxt3/src/pages/utils.ts             | 15 +++++-----
 packages/nuxt3/test/auto-imports.test.ts      |  6 ++--
 packages/vite/package.json                    |  1 +
 packages/vite/src/dev-bundler.ts              | 10 ++++---
 yarn.lock                                     | 12 ++++++++
 25 files changed, 118 insertions(+), 94 deletions(-)

diff --git a/packages/bridge/package.json b/packages/bridge/package.json
index dc4e0aff6d7..02298361041 100644
--- a/packages/bridge/package.json
+++ b/packages/bridge/package.json
@@ -38,6 +38,7 @@
     "globby": "^13.1.1",
     "h3": "^0.3.9",
     "hash-sum": "^2.0.0",
+    "knitwork": "^0.1.0",
     "magic-string": "^0.25.7",
     "mlly": "^0.4.1",
     "murmurhash-es": "^0.1.1",
diff --git a/packages/bridge/src/vite/templates.ts b/packages/bridge/src/vite/templates.ts
index 845980bc7ea..ac5971bdce0 100644
--- a/packages/bridge/src/vite/templates.ts
+++ b/packages/bridge/src/vite/templates.ts
@@ -2,6 +2,7 @@ import hash from 'hash-sum'
 import { resolve } from 'pathe'
 
 import type { Nuxt, NuxtApp } from '@nuxt/schema'
+import { genImport, genObjectFromRawEntries } from 'knitwork'
 
 type TemplateContext = {
   nuxt: Nuxt;
@@ -24,10 +25,8 @@ export const middlewareTemplate = {
         id: m.name || m.src.replace(/[\\/]/g, '/').replace(/\.(js|ts)$/, '')
       }
     })
-    return `${_middleware.map(m => `import $${hash(m.id)} from '${m.filePath}'`).join('\n')}
-const middleware = {
-${_middleware.map(m => `  ['${m.id}']: $${hash(m.id)}`).join(',\n')}
-}
+    return `${_middleware.map(m => genImport(m.filePath, `$${hash(m.id)}`)).join('\n')}
+const middleware = ${genObjectFromRawEntries(_middleware.map(m => [m.id, `$${hash(m.id)}`]))}
 export default middleware`
   }
 }
@@ -49,14 +48,12 @@ export const storeTemplate = {
 
     return `import Vue from 'vue'
 import Vuex from 'vuex'
-${_storeModules.map(s => `import * as $${hash(s.id)} from '${s.filePath}'`).join('\n')}
+${_storeModules.map(s => genImport(s.filePath, { name: '*', as: `$${hash(s.id)}` })).join('\n')}
 Vue.use(Vuex)
 
 const VUEX_PROPERTIES = ['state', 'getters', 'actions', 'mutations']
 
-const storeModules = {
-${_storeModules.map(m => `  ['${m.id}']: $${hash(m.id)}`).join(',\n')}
-}
+const storeModules = ${genObjectFromRawEntries(_storeModules.map(m => [m.id, `$${hash(m.id)}`]))}
 
 export function createStore() {
   let store = normalizeRoot(storeModules.root || {})
diff --git a/packages/kit/package.json b/packages/kit/package.json
index c58c5ce6ca4..b4e81e9e541 100644
--- a/packages/kit/package.json
+++ b/packages/kit/package.json
@@ -20,6 +20,7 @@
     "globby": "^13.1.1",
     "hash-sum": "^2.0.0",
     "jiti": "^1.12.15",
+    "knitwork": "^0.1.0",
     "lodash.template": "^4.5.0",
     "mlly": "^0.4.1",
     "pathe": "^0.2.0",
diff --git a/packages/kit/src/components.ts b/packages/kit/src/components.ts
index 6b8486ca231..44092da047b 100644
--- a/packages/kit/src/components.ts
+++ b/packages/kit/src/components.ts
@@ -1,5 +1,6 @@
 import { pascalCase, kebabCase } from 'scule'
 import type { ComponentsDir, Component } from '@nuxt/schema'
+import { genDynamicImport } from 'knitwork'
 import { useNuxt } from './context'
 import { assertNuxtCompatibility } from './compatibility'
 
@@ -43,8 +44,8 @@ export async function addComponent (opts: AddComponentOptions) {
     shortPath: opts.filePath,
     async: false,
     level: 0,
-    asyncImport: `() => import('${opts.filePath}').then(r => r['${opts.export || 'default'}'])`,
-    import: `require('${opts.filePath}')['${opts.export || 'default'}']`,
+    asyncImport: `${genDynamicImport(opts.filePath)}.then(r => r['${opts.export || 'default'}'])`,
+    import: `require(${JSON.stringify(opts.filePath)})['${opts.export || 'default'}']`,
 
     ...opts
   }
diff --git a/packages/kit/src/internal/template.ts b/packages/kit/src/internal/template.ts
index 46d63d02862..863aa87f630 100644
--- a/packages/kit/src/internal/template.ts
+++ b/packages/kit/src/internal/template.ts
@@ -3,6 +3,7 @@ import lodashTemplate from 'lodash.template'
 import hash from 'hash-sum'
 import { camelCase } from 'scule'
 import { basename, extname } from 'pathe'
+import { genDynamicImport, genImport } from 'knitwork'
 
 import type { NuxtTemplate } from '@nuxt/schema'
 
@@ -23,7 +24,7 @@ export async function compileTemplate (template: NuxtTemplate, ctx: any) {
   throw new Error('Invalid template: ' + JSON.stringify(template))
 }
 
-const serialize = (data: any) => JSON.stringify(data, null, 2).replace(/"{(.+)}"/g, '$1')
+const serialize = (data: any) => JSON.stringify(data, null, 2).replace(/"{(.+)}"(?=,?$)/gm, r => JSON.parse(r).replace(/^{(.*)}$/, '$1'))
 
 const importName = (src: string) => `${camelCase(basename(src, extname(src))).replace(/[^a-zA-Z?\d\s:]/g, '')}_${hash(src)}`
 
@@ -33,9 +34,9 @@ const importSources = (sources: string | string[], { lazy = false } = {}) => {
   }
   return sources.map((src) => {
     if (lazy) {
-      return `const ${importName(src)} = () => import('${src}' /* webpackChunkName: '${src}' */)`
+      return `const ${importName(src)} = ${genDynamicImport(src, { comment: `webpackChunkName: ${JSON.stringify(src)}` })}`
     }
-    return `import ${importName(src)} from '${src}'`
+    return genImport(src, importName(src))
   }).join('\n')
 }
 
diff --git a/packages/nitro/package.json b/packages/nitro/package.json
index d7f98ed9ce9..6275ad6a056 100644
--- a/packages/nitro/package.json
+++ b/packages/nitro/package.json
@@ -48,6 +48,7 @@
     "http-proxy": "^1.18.1",
     "is-primitive": "^3.0.1",
     "jiti": "^1.12.15",
+    "knitwork": "^0.1.0",
     "listhen": "^0.2.6",
     "mime": "^3.0.0",
     "mlly": "^0.4.1",
diff --git a/packages/nitro/src/build.ts b/packages/nitro/src/build.ts
index bdf2ddbd7c8..9d9666565a2 100644
--- a/packages/nitro/src/build.ts
+++ b/packages/nitro/src/build.ts
@@ -2,6 +2,7 @@ import { relative, resolve, join } from 'pathe'
 import consola from 'consola'
 import * as rollup from 'rollup'
 import fse from 'fs-extra'
+import { genDynamicImport } from 'knitwork'
 import { printFSTree } from './utils/tree'
 import { getRollupConfig } from './rollup/config'
 import { hl, prettyPath, serializeTemplate, writeFile, isDirectory, replaceAll } from './utils'
@@ -73,7 +74,7 @@ export async function writeTypes (nitroContext: NitroContext) {
     if (typeof mw.handle !== 'string') { continue }
     const relativePath = relative(nitroContext._nuxt.buildDir, mw.handle).replace(/\.[a-z]+$/, '')
     routeTypes[mw.route] = routeTypes[mw.route] || []
-    routeTypes[mw.route].push(`Awaited<ReturnType<typeof import('${relativePath}').default>>`)
+    routeTypes[mw.route].push(`Awaited<ReturnType<typeof ${genDynamicImport(relativePath, { wrapper: false })}.default>>`)
   }
 
   const lines = [
diff --git a/packages/nitro/src/presets/browser.ts b/packages/nitro/src/presets/browser.ts
index 5cc7a5d840f..5d9c8bf527c 100644
--- a/packages/nitro/src/presets/browser.ts
+++ b/packages/nitro/src/presets/browser.ts
@@ -2,6 +2,7 @@ import { existsSync, promises as fsp } from 'fs'
 import { resolve } from 'pathe'
 import consola from 'consola'
 import { joinURL } from 'ufo'
+import { genString } from 'knitwork'
 import { extendPreset, prettyPath } from '../utils'
 import { NitroPreset, NitroContext, NitroInput } from '../context'
 import { worker } from './worker'
@@ -13,7 +14,7 @@ export const browser: NitroPreset = extendPreset(worker, (input: NitroInput) =>
   const script = `<script>
 if ('serviceWorker' in navigator) {
   window.addEventListener('load', function () {
-    navigator.serviceWorker.register('${joinURL(baseURL, 'sw.js')}');
+    navigator.serviceWorker.register(${genString(joinURL(baseURL, 'sw.js'))});
   });
 }
 </script>`
@@ -27,7 +28,7 @@ if ('serviceWorker' in navigator) {
   <link rel="prefetch" href="${joinURL(baseURL, '_server/index.mjs')}">
   <script>
   async function register () {
-    const registration = await navigator.serviceWorker.register('${joinURL(baseURL, 'sw.js')}')
+    const registration = await navigator.serviceWorker.register(${genString(joinURL(baseURL, 'sw.js'))})
     await navigator.serviceWorker.ready
     registration.active.addEventListener('statechange', (event) => {
       if (event.target.state === 'activated') {
@@ -64,7 +65,7 @@ if ('serviceWorker' in navigator) {
         tmpl.contents = tmpl.contents.replace('</body>', script + '</body>')
       },
       async 'nitro:compiled' ({ output }: NitroContext) {
-        await fsp.writeFile(resolve(output.publicDir, 'sw.js'), `self.importScripts('${joinURL(baseURL, '_server/index.mjs')}');`, 'utf8')
+        await fsp.writeFile(resolve(output.publicDir, 'sw.js'), `self.importScripts(${genString(joinURL(baseURL, '_server/index.mjs'))});`, 'utf8')
 
         // Temp fix
         if (!existsSync(resolve(output.publicDir, 'index.html'))) {
diff --git a/packages/nitro/src/rollup/config.ts b/packages/nitro/src/rollup/config.ts
index 57fcbb2553e..60e12413434 100644
--- a/packages/nitro/src/rollup/config.ts
+++ b/packages/nitro/src/rollup/config.ts
@@ -18,6 +18,7 @@ import devalue from '@nuxt/devalue'
 
 import type { Preset } from 'unenv'
 import { sanitizeFilePath } from 'mlly'
+import { genImport } from 'knitwork'
 import { NitroContext } from '../context'
 import { resolvePath } from '../utils'
 import { pkgDir } from '../dirs'
@@ -215,7 +216,7 @@ export const getRollupConfig = (nitroContext: NitroContext) => {
 
   // Polyfill
   rollupConfig.plugins.push(virtual({
-    '#polyfill': env.polyfill.map(p => `import '${p}';`).join('\n')
+    '#polyfill': env.polyfill.map(p => genImport(p)).join('\n')
   }))
 
   // https://github.com/rollup/plugins/tree/master/packages/alias
diff --git a/packages/nitro/src/rollup/plugins/assets.ts b/packages/nitro/src/rollup/plugins/assets.ts
index b9c86717a4e..3de4dbffda1 100644
--- a/packages/nitro/src/rollup/plugins/assets.ts
+++ b/packages/nitro/src/rollup/plugins/assets.ts
@@ -4,6 +4,7 @@ import createEtag from 'etag'
 import mime from 'mime'
 import { resolve } from 'pathe'
 import { globby } from 'globby'
+import { genDynamicImport, genObjectFromRawEntries } from 'knitwork'
 import virtual from './virtual'
 
 export interface AssetOptions {
@@ -81,9 +82,12 @@ function normalizeKey (key) {
 
 function getAssetProd (assets: Record<string, Asset>) {
   return `
-const _assets = {\n${Object.entries(assets).map(([id, asset]) =>
-  `  ['${normalizeKey(id)}']: {\n    import: () => import('${asset.fsPath}').then(r => r.default || r),\n    meta: ${JSON.stringify(asset.meta)}\n  }`
-).join(',\n')}\n}
+const _assets = ${genObjectFromRawEntries(
+  Object.entries(assets).map(([id, asset]) => [normalizeKey(id), {
+    import: genDynamicImport(asset.fsPath, { interopDefault: true }),
+    meta: asset.meta
+  }])
+)}
 
 ${normalizeKey.toString()}
 
diff --git a/packages/nitro/src/rollup/plugins/dynamic-require.ts b/packages/nitro/src/rollup/plugins/dynamic-require.ts
index 3c5e2e80f65..eb99c4f92dc 100644
--- a/packages/nitro/src/rollup/plugins/dynamic-require.ts
+++ b/packages/nitro/src/rollup/plugins/dynamic-require.ts
@@ -2,6 +2,7 @@ import { pathToFileURL } from 'url'
 import { resolve } from 'pathe'
 import { globby } from 'globby'
 import type { Plugin } from 'rollup'
+import { genDynamicImport, genObjectFromRawEntries, genImport } from 'knitwork'
 import { serializeImportName } from '../../utils'
 
 const PLUGIN_NAME = 'dynamic-require'
@@ -36,7 +37,7 @@ export function dynamicRequire ({ dir, ignore, inline }: Options): Plugin {
     name: PLUGIN_NAME,
     transform (code: string, _id: string) {
       return {
-        code: code.replace(DYNAMIC_REQUIRE_RE, `import('${HELPER_DYNAMIC}').then(r => r.default || r).then(dynamicRequire => dynamicRequire($1)).then`),
+        code: code.replace(DYNAMIC_REQUIRE_RE, `${genDynamicImport(HELPER_DYNAMIC, { wrapper: false, interopDefault: true })}.then(dynamicRequire => dynamicRequire($1)).then`),
         map: null
       }
     },
@@ -89,10 +90,8 @@ async function getWebpackChunkMeta (src: string) {
 }
 
 function TMPL_INLINE ({ chunks }: TemplateContext) {
-  return `${chunks.map(i => `import * as ${i.name} from '${i.src}'`).join('\n')}
-const dynamicChunks = {
-  ${chunks.map(i => ` ['${i.id}']: ${i.name}`).join(',\n')}
-};
+  return `${chunks.map(i => genImport(i.src, { name: '*', as: i.name })).join('\n')}
+const dynamicChunks = ${genObjectFromRawEntries(chunks.map(i => [i.id, i.name]))};
 
 export default function dynamicRequire(id) {
   return Promise.resolve(dynamicChunks[id]);
@@ -101,9 +100,7 @@ export default function dynamicRequire(id) {
 
 function TMPL_LAZY ({ chunks }: TemplateContext) {
   return `
-const dynamicChunks = {
-${chunks.map(i => ` ['${i.id}']: () => import('${i.src}')`).join(',\n')}
-};
+const dynamicChunks = ${genObjectFromRawEntries(chunks.map(i => [i.id, genDynamicImport(i.src)]))};
 
 export default function dynamicRequire(id) {
   return dynamicChunks[id]();
diff --git a/packages/nitro/src/rollup/plugins/middleware.ts b/packages/nitro/src/rollup/plugins/middleware.ts
index 895ca03f00c..493ce598e8f 100644
--- a/packages/nitro/src/rollup/plugins/middleware.ts
+++ b/packages/nitro/src/rollup/plugins/middleware.ts
@@ -3,6 +3,7 @@ import { relative } from 'pathe'
 import table from 'table'
 import isPrimitive from 'is-primitive'
 import { isDebug } from 'std-env'
+import { genArrayFromRaw, genDynamicImport, genImport } from 'knitwork'
 import type { ServerMiddleware } from '../../server/middleware'
 import virtual from './virtual'
 
@@ -35,15 +36,18 @@ export function middleware (getMiddleware: () => ServerMiddleware[]) {
         const lazyImports = unique(middleware.filter(m => m.lazy !== false && !imports.includes(m.handle)).map(m => m.handle))
 
         return `
-  ${imports.map(handle => `import ${getImportId(handle)} from '${handle}';`).join('\n')}
+${imports.map(handle => `${genImport(handle, getImportId(handle))};`).join('\n')}
 
-  ${lazyImports.map(handle => `const ${getImportId(handle)} = () => import('${handle}');`).join('\n')}
+${lazyImports.map(handle => `const ${getImportId(handle)} = ${genDynamicImport(handle)};`).join('\n')}
 
-  const middleware = [
-    ${middleware.map(m => `{ route: '${m.route}', handle: ${getImportId(m.handle)}, lazy: ${m.lazy || true}, promisify: ${m.promisify !== undefined ? m.promisify : true} }`).join(',\n')}
-  ];
+const middleware = ${genArrayFromRaw(middleware.map(m => ({
+  route: JSON.stringify(m.route),
+  handle: getImportId(m.handle),
+  lazy: m.lazy || true,
+  promisify: m.promisify !== undefined ? m.promisify : true
+})))};
 
-  export default middleware
+export default middleware
   `
       }
     }
diff --git a/packages/nitro/src/rollup/plugins/storage.ts b/packages/nitro/src/rollup/plugins/storage.ts
index 63d96214f2a..45d213ef268 100644
--- a/packages/nitro/src/rollup/plugins/storage.ts
+++ b/packages/nitro/src/rollup/plugins/storage.ts
@@ -1,4 +1,5 @@
 import virtual from '@rollup/plugin-virtual'
+import { genImport, genString } from 'knitwork'
 import { serializeImportName } from '../../utils'
 
 export interface StorageOptions {
@@ -35,13 +36,13 @@ export function storage (opts: StorageOptions) {
 import { createStorage } from 'unstorage'
 import { assets } from '#assets'
 
-${driverImports.map(i => `import ${serializeImportName(i)} from '${i}'`).join('\n')}
+${driverImports.map(i => genImport(i, serializeImportName(i))).join('\n')}
 
 export const storage = createStorage({})
 
 storage.mount('/assets', assets)
 
-${mounts.map(m => `storage.mount('${m.path}', ${serializeImportName(m.driver)}(${JSON.stringify(m.opts)}))`).join('\n')}
+${mounts.map(m => `storage.mount(${genString(m.path)}, ${serializeImportName(m.driver)}(${JSON.stringify(m.opts)}))`).join('\n')}
 `
   })
 }
diff --git a/packages/nuxt3/package.json b/packages/nuxt3/package.json
index 705dadf663e..f1811cb2f57 100644
--- a/packages/nuxt3/package.json
+++ b/packages/nuxt3/package.json
@@ -39,6 +39,7 @@
     "hash-sum": "^2.0.0",
     "hookable": "^5.1.1",
     "ignore": "^5.2.0",
+    "knitwork": "^0.1.0",
     "mlly": "^0.4.1",
     "murmurhash-es": "^0.1.1",
     "nuxi": "3.0.0",
diff --git a/packages/nuxt3/src/auto-imports/module.ts b/packages/nuxt3/src/auto-imports/module.ts
index cbdec2db0a3..4ebc768bcb2 100644
--- a/packages/nuxt3/src/auto-imports/module.ts
+++ b/packages/nuxt3/src/auto-imports/module.ts
@@ -1,6 +1,7 @@
 import { addVitePlugin, addWebpackPlugin, defineNuxtModule, addTemplate, resolveAlias, addPluginTemplate, useNuxt } from '@nuxt/kit'
 import type { AutoImportsOptions } from '@nuxt/schema'
 import { isAbsolute, join, relative, resolve, normalize } from 'pathe'
+import { genDynamicImport } from 'knitwork'
 import { TransformPlugin } from './transform'
 import { Nuxt3AutoImports } from './imports'
 import { scanForComposables } from './composables'
@@ -132,7 +133,7 @@ function generateDts (ctx: AutoImportContext) {
     write: true,
     getContents: () => `// Generated by auto imports
 declare global {
-${ctx.autoImports.map(i => `  const ${i.as}: typeof import('${r(i.from)}')['${i.name}']`).join('\n')}
+${ctx.autoImports.map(i => `  const ${i.as}: typeof ${genDynamicImport(r(i.from), { wrapper: false })}['${i.name}']`).join('\n')}
 }
 
 export {}
diff --git a/packages/nuxt3/src/auto-imports/utils.ts b/packages/nuxt3/src/auto-imports/utils.ts
index 872d179fa57..cb024967c11 100644
--- a/packages/nuxt3/src/auto-imports/utils.ts
+++ b/packages/nuxt3/src/auto-imports/utils.ts
@@ -1,4 +1,5 @@
 import type { AutoImport } from '@nuxt/schema'
+import { genExport, genImport, genString } from 'knitwork'
 
 export function toImportModuleMap (autoImports: AutoImport[], isCJS = false) {
   const aliasKeyword = isCJS ? ' : ' : ' as '
@@ -20,11 +21,11 @@ export function toImports (autoImports: AutoImport[], isCJS = false) {
   const map = toImportModuleMap(autoImports, isCJS)
   if (isCJS) {
     return Object.entries(map)
-      .map(([name, imports]) => `const { ${Array.from(imports).join(', ')} } = require('${name}');`)
+      .map(([name, imports]) => `const { ${Array.from(imports).join(', ')} } = require(${genString(name)});`)
       .join('\n')
   } else {
     return Object.entries(map)
-      .map(([name, imports]) => `import { ${Array.from(imports).join(', ')} } from '${name}';`)
+      .map(([name, imports]) => genImport(name, Array.from(imports)))
       .join('\n')
   }
 }
@@ -32,7 +33,7 @@ export function toImports (autoImports: AutoImport[], isCJS = false) {
 export function toExports (autoImports: AutoImport[]) {
   const map = toImportModuleMap(autoImports, false)
   return Object.entries(map)
-    .map(([name, imports]) => `export { ${Array.from(imports).join(', ')} } from '${name}';`)
+    .map(([name, imports]) => genExport(name, Array.from(imports)))
     .join('\n')
 }
 
diff --git a/packages/nuxt3/src/components/loader.ts b/packages/nuxt3/src/components/loader.ts
index 7477d178552..e8162ca277b 100644
--- a/packages/nuxt3/src/components/loader.ts
+++ b/packages/nuxt3/src/components/loader.ts
@@ -1,6 +1,7 @@
 import { createUnplugin } from 'unplugin'
 import { parseQuery, parseURL } from 'ufo'
 import { Component } from '@nuxt/schema'
+import { genImport } from 'knitwork'
 
 interface LoaderOptions {
   getComponents(): Component[]
@@ -36,7 +37,7 @@ function transform (content: string, components: Component[]) {
     if (component) {
       const identifier = map.get(component) || `__nuxt_component_${num++}`
       map.set(component, identifier)
-      imports += `import ${identifier} from "${component.filePath}";`
+      imports += genImport(component.filePath, identifier)
       return ` ${identifier}`
     }
     // no matched
diff --git a/packages/nuxt3/src/components/templates.ts b/packages/nuxt3/src/components/templates.ts
index d301e2016a2..25b4f5d60ea 100644
--- a/packages/nuxt3/src/components/templates.ts
+++ b/packages/nuxt3/src/components/templates.ts
@@ -1,6 +1,7 @@
 
 import { isAbsolute, join, relative } from 'pathe'
 import type { Component } from '@nuxt/schema'
+import { genDynamicImport, genObjectFromRawEntries } from 'knitwork'
 
 export type ComponentsTemplateOptions = {
   buildDir?: string
@@ -27,14 +28,12 @@ export const componentsTemplate = {
   getContents ({ options }: { options: ComponentsTemplateOptions }) {
     return `import { defineAsyncComponent } from 'vue'
 
-const components = {
-${options.components.filter(c => c.global !== false).map((c) => {
+const components = ${genObjectFromRawEntries(options.components.filter(c => c.global !== false).map((c) => {
   const exp = c.export === 'default' ? 'c.default || c' : `c['${c.export}']`
-  const magicComments = createImportMagicComments(c)
+  const comment = createImportMagicComments(c)
 
-  return `  '${c.pascalName}': defineAsyncComponent(() => import('${c.filePath}' /* ${magicComments} */).then(c => ${exp}))`
-}).join(',\n')}
-}
+  return [c.pascalName, `defineAsyncComponent(${genDynamicImport(c.filePath, { comment })}.then(c => ${exp}))`]
+}))}
 
 export default function (nuxtApp) {
   for (const name in components) {
@@ -51,7 +50,7 @@ export const componentsTypeTemplate = {
   getContents: ({ options }: { options: ComponentsTemplateOptions }) => `// Generated by components discovery
 declare module 'vue' {
   export interface GlobalComponents {
-${options.components.map(c => `    '${c.pascalName}': typeof import('${isAbsolute(c.filePath) ? relative(join(options.buildDir, 'types'), c.filePath) : c.filePath}')['${c.export}']`).join(',\n')}
+${options.components.map(c => `    '${c.pascalName}': typeof ${genDynamicImport(isAbsolute(c.filePath) ? relative(join(options.buildDir, 'types'), c.filePath) : c.filePath, { wrapper: false })}['${c.export}']`).join(',\n')}
   }
 }
 export {}
diff --git a/packages/nuxt3/src/core/templates.ts b/packages/nuxt3/src/core/templates.ts
index 47c4251a829..998a8994d06 100644
--- a/packages/nuxt3/src/core/templates.ts
+++ b/packages/nuxt3/src/core/templates.ts
@@ -1,5 +1,6 @@
 import { templateUtils } from '@nuxt/kit'
 import type { Nuxt, NuxtApp } from '@nuxt/schema'
+import { genArrayFromRaw, genDynamicImport, genExport, genImport } from 'knitwork'
 
 import { isAbsolute, join, relative } from 'pathe'
 import escapeRE from 'escape-string-regexp'
@@ -24,23 +25,17 @@ export const vueShim = {
 // TODO: Use an alias
 export const appComponentTemplate = {
   filename: 'app-component.mjs',
-  getContents (ctx: TemplateContext) {
-    return `export { default } from '${ctx.app.mainComponent}'`
-  }
+  getContents: (ctx: TemplateContext) => genExport(ctx.app.mainComponent, ['default'])
 }
 // TODO: Use an alias
 export const rootComponentTemplate = {
   filename: 'root-component.mjs',
-  getContents (ctx: TemplateContext) {
-    return `export { default } from '${ctx.app.rootComponent}'`
-  }
+  getContents: (ctx: TemplateContext) => genExport(ctx.app.rootComponent, ['default'])
 }
 
 export const cssTemplate = {
   filename: 'css.mjs',
-  getContents (ctx: TemplateContext) {
-    return ctx.nuxt.options.css.map(i => `import '${i.src || i}';`).join('\n')
-  }
+  getContents: (ctx: TemplateContext) => ctx.nuxt.options.css.map(i => genImport(i.src || i)).join('\n')
 }
 
 export const clientPluginTemplate = {
@@ -49,9 +44,7 @@ export const clientPluginTemplate = {
     const clientPlugins = ctx.app.plugins.filter(p => !p.mode || p.mode !== 'server')
     return [
       templateUtils.importSources(clientPlugins.map(p => p.src)),
-      'export default [',
-      clientPlugins.map(p => templateUtils.importName(p.src)).join(',\n  '),
-      ']'
+      `export default ${genArrayFromRaw(clientPlugins.map(p => templateUtils.importName(p.src)))}`
     ].join('\n')
   }
 }
@@ -63,10 +56,10 @@ export const serverPluginTemplate = {
     return [
       "import preload from '#app/plugins/preload.server'",
       templateUtils.importSources(serverPlugins.map(p => p.src)),
-      'export default [',
-      '  preload,',
-      serverPlugins.map(p => templateUtils.importName(p.src)).join(',\n  '),
-      ']'
+      `export default ${genArrayFromRaw([
+        'preload',
+        ...serverPlugins.map(p => templateUtils.importName(p.src))
+      ])}`
     ].join('\n')
   }
 }
@@ -103,7 +96,7 @@ type Decorate<T extends Record<string, any>> = { [K in keyof T as K extends stri
 
 type InjectionType<A extends Plugin> = A extends Plugin<infer T> ? Decorate<T> : unknown
 
-type NuxtAppInjections = \n  ${tsImports.map(p => `InjectionType<typeof import('${p}').default>`).join(' &\n  ')}
+type NuxtAppInjections = \n  ${tsImports.map(p => `InjectionType<typeof ${genDynamicImport(p, { wrapper: false })}.default>`).join(' &\n  ')}
 
 declare module '#app' {
   interface NuxtApp extends NuxtAppInjections { }
diff --git a/packages/nuxt3/src/pages/module.ts b/packages/nuxt3/src/pages/module.ts
index dafc3d368e8..498089b17ae 100644
--- a/packages/nuxt3/src/pages/module.ts
+++ b/packages/nuxt3/src/pages/module.ts
@@ -1,6 +1,7 @@
 import { existsSync } from 'fs'
-import { defineNuxtModule, addTemplate, addPlugin, templateUtils, addVitePlugin, addWebpackPlugin } from '@nuxt/kit'
+import { defineNuxtModule, addTemplate, addPlugin, addVitePlugin, addWebpackPlugin } from '@nuxt/kit'
 import { resolve } from 'pathe'
+import { genDynamicImport, genString, genArrayFromRaw, genImport, genObjectFromRawEntries } from 'knitwork'
 import escapeRE from 'escape-string-regexp'
 import { distDir } from '../dirs'
 import { resolveLayouts, resolvePagesRoutes, normalizeRoutes, resolveMiddleware, getImportName } from './utils'
@@ -80,8 +81,8 @@ export default defineNuxtModule({
       async getContents () {
         const pages = await resolvePagesRoutes(nuxt)
         await nuxt.callHook('pages:extend', pages)
-        const { routes: serializedRoutes, imports } = normalizeRoutes(pages)
-        return [...imports, `export default ${templateUtils.serialize(serializedRoutes)}`].join('\n')
+        const { routes, imports } = normalizeRoutes(pages)
+        return [...imports, `export default ${routes}`].join('\n')
       }
     })
 
@@ -92,11 +93,11 @@ export default defineNuxtModule({
         const middleware = await resolveMiddleware()
         const globalMiddleware = middleware.filter(mw => mw.global)
         const namedMiddleware = middleware.filter(mw => !mw.global)
-        const namedMiddlewareObject = Object.fromEntries(namedMiddleware.map(mw => [mw.name, `{() => import('${mw.path}')}`]))
+        const namedMiddlewareObject = genObjectFromRawEntries(namedMiddleware.map(mw => [mw.name, genDynamicImport(mw.path)]))
         return [
-          ...globalMiddleware.map(mw => `import ${getImportName(mw.name)} from '${mw.path}'`),
-          `export const globalMiddleware = [${globalMiddleware.map(mw => getImportName(mw.name)).join(', ')}]`,
-          `export const namedMiddleware = ${templateUtils.serialize(namedMiddlewareObject)}`
+          ...globalMiddleware.map(mw => genImport(mw.path, getImportName(mw.name))),
+          `export const globalMiddleware = ${genArrayFromRaw(globalMiddleware.map(mw => getImportName(mw.name)))}`,
+          `export const namedMiddleware = ${namedMiddlewareObject}`
         ].join('\n')
       }
     })
@@ -109,8 +110,8 @@ export default defineNuxtModule({
         const namedMiddleware = middleware.filter(mw => !mw.global)
         return [
           'import type { NavigationGuard } from \'vue-router\'',
-          `export type MiddlewareKey = ${namedMiddleware.map(mw => `"${mw.name}"`).join(' | ') || 'string'}`,
-          `declare module '${composablesFile}' {`,
+          `export type MiddlewareKey = ${namedMiddleware.map(mw => genString(mw.name)).join(' | ') || 'string'}`,
+          `declare module ${genString(composablesFile)} {`,
           '  interface PageMeta {',
           '    middleware?: MiddlewareKey | NavigationGuard | Array<MiddlewareKey | NavigationGuard>',
           '  }',
@@ -126,8 +127,8 @@ export default defineNuxtModule({
         const layouts = await resolveLayouts(nuxt)
         return [
           'import { ComputedRef, Ref } from \'vue\'',
-          `export type LayoutKey = ${layouts.map(layout => `"${layout.name}"`).join(' | ') || 'string'}`,
-          `declare module '${composablesFile}' {`,
+          `export type LayoutKey = ${layouts.map(layout => genString(layout.name)).join(' | ') || 'string'}`,
+          `declare module ${genString(composablesFile)} {`,
           '  interface PageMeta {',
           '    layout?: false | LayoutKey | Ref<LayoutKey> | ComputedRef<LayoutKey>',
           '  }',
@@ -141,12 +142,12 @@ export default defineNuxtModule({
       filename: 'layouts.mjs',
       async getContents () {
         const layouts = await resolveLayouts(nuxt)
-        const layoutsObject = Object.fromEntries(layouts.map(({ name, file }) => {
-          return [name, `{defineAsyncComponent({ suspensible: false, loader: () => import('${file}') })}`]
+        const layoutsObject = genObjectFromRawEntries(layouts.map(({ name, file }) => {
+          return [name, `defineAsyncComponent({ suspensible: false, loader: ${genDynamicImport(file)} })`]
         }))
         return [
           'import { defineAsyncComponent } from \'vue\'',
-          `export default ${templateUtils.serialize(layoutsObject)}`
+          `export default ${layoutsObject}`
         ].join('\n')
       }
     })
diff --git a/packages/nuxt3/src/pages/utils.ts b/packages/nuxt3/src/pages/utils.ts
index ea23be2bfd1..461703674af 100644
--- a/packages/nuxt3/src/pages/utils.ts
+++ b/packages/nuxt3/src/pages/utils.ts
@@ -3,6 +3,7 @@ import { encodePath } from 'ufo'
 import type { Nuxt, NuxtMiddleware, NuxtPage } from '@nuxt/schema'
 import { resolveFiles, useNuxt } from '@nuxt/kit'
 import { kebabCase, pascalCase } from 'scule'
+import { genImport, genDynamicImport, genArrayFromRaw } from 'knitwork'
 import escapeRE from 'escape-string-regexp'
 
 enum SegmentParserState {
@@ -225,20 +226,20 @@ export async function resolveLayouts (nuxt: Nuxt) {
   return layouts
 }
 
-export function normalizeRoutes (routes: NuxtPage[], metaImports: Set<string> = new Set()): { imports: Set<string>, routes: NuxtPage[]} {
+export function normalizeRoutes (routes: NuxtPage[], metaImports: Set<string> = new Set()): { imports: Set<string>, routes: string } {
   return {
     imports: metaImports,
-    routes: routes.map((route) => {
+    routes: genArrayFromRaw(routes.map((route) => {
       const file = normalize(route.file)
       const metaImportName = getImportName(file) + 'Meta'
-      metaImports.add(`import { meta as ${metaImportName} } from '${file}?macro=true'`)
+      metaImports.add(genImport(`${file}?macro=true`, [{ name: 'meta', as: metaImportName }]))
       return {
-        ...route,
+        ...Object.fromEntries(Object.entries(route).map(([key, value]) => [key, JSON.stringify(value)])),
         children: route.children ? normalizeRoutes(route.children, metaImports).routes : [],
-        meta: route.meta || `{${metaImportName}}` as any,
-        component: `{() => import('${file}')}`
+        meta: route.meta ? JSON.stringify(route.meta) : metaImportName,
+        component: genDynamicImport(file)
       }
-    })
+    }))
   }
 }
 
diff --git a/packages/nuxt3/test/auto-imports.test.ts b/packages/nuxt3/test/auto-imports.test.ts
index 07db8283e97..6bc7d471bd6 100644
--- a/packages/nuxt3/test/auto-imports.test.ts
+++ b/packages/nuxt3/test/auto-imports.test.ts
@@ -28,8 +28,8 @@ describe('auto-imports:transform', () => {
   const transform = (code: string) => transformPlugin.transform.call({ error: null, warn: null }, code, '')
 
   it('should correct inject', async () => {
-    expect(await transform('const a = ref(0)')).to.equal('import { ref } from \'vue\';const a = ref(0)')
-    expect(await transform('import { computed as ref } from "foo"; const a = ref(0)')).to.include('import { computed } from \'bar\';')
+    expect(await transform('const a = ref(0)')).to.equal('import { ref } from "vue";const a = ref(0)')
+    expect(await transform('import { computed as ref } from "foo"; const a = ref(0)')).to.include('import { computed } from "bar";')
   })
 
   it('should ignore existing imported', async () => {
@@ -43,7 +43,7 @@ describe('auto-imports:transform', () => {
 
   it('should ignore comments', async () => {
     const result = await transform('// import { computed } from "foo"\n;const a = computed(0)')
-    expect(result).to.equal('import { computed } from \'bar\';// import { computed } from "foo"\n;const a = computed(0)')
+    expect(result).to.equal('import { computed } from "bar";// import { computed } from "foo"\n;const a = computed(0)')
   })
 
   it('should exclude files from transform', () => {
diff --git a/packages/vite/package.json b/packages/vite/package.json
index cbf14bdba2d..7dd7e2cfa22 100644
--- a/packages/vite/package.json
+++ b/packages/vite/package.json
@@ -29,6 +29,7 @@
     "escape-string-regexp": "^5.0.0",
     "externality": "^0.1.6",
     "fs-extra": "^10.0.0",
+    "knitwork": "^0.1.0",
     "magic-string": "^0.25.7",
     "mlly": "^0.4.1",
     "p-debounce": "^4.0.0",
diff --git a/packages/vite/src/dev-bundler.ts b/packages/vite/src/dev-bundler.ts
index c13e5f0697f..dfb37480a1a 100644
--- a/packages/vite/src/dev-bundler.ts
+++ b/packages/vite/src/dev-bundler.ts
@@ -4,6 +4,7 @@ import { builtinModules } from 'module'
 import { resolve } from 'pathe'
 import * as vite from 'vite'
 import { ExternalsOptions, isExternal as _isExternal, ExternalsDefaults } from 'externality'
+import { genDynamicImport, genObjectFromRawEntries } from 'knitwork'
 import { hashId, uniq } from './utils'
 
 export interface TransformChunk {
@@ -78,7 +79,7 @@ async function transformRequest (opts: TransformOptions, id: string) {
       ? withoutVersionQuery
       : pathToFileURL(withoutVersionQuery)
     return {
-      code: `(global, exports, importMeta, ssrImport, ssrDynamicImport, ssrExportAll) => import('${path}').then(r => { exports.default = r.default; ssrExportAll(r) }).catch(e => { console.error(e); throw new Error('[vite dev] Error loading external "${id}".') })`,
+      code: `(global, exports, importMeta, ssrImport, ssrDynamicImport, ssrExportAll) => ${genDynamicImport(path, { wrapper: false })}.then(r => { exports.default = r.default; ssrExportAll(r) }).catch(e => { console.error(e); throw new Error(${JSON.stringify(`[vite dev] Error loading external "${id}".`)}) })`,
       deps: [],
       dynamicDeps: []
     }
@@ -131,8 +132,9 @@ export async function bundleRequest (opts: TransformOptions, entryURL: string) {
 const ${hashId(chunk.id)} = ${chunk.code}
 `).join('\n')
 
-  const manifestCode = 'const __modules__ = {\n' +
-   chunks.map(chunk => ` '${chunk.id}': ${hashId(chunk.id)}`).join(',\n') + '\n}'
+  const manifestCode = `const __modules__ = ${
+    genObjectFromRawEntries(chunks.map(chunk => [chunk.id, hashId(chunk.id)]))
+  }`
 
   // https://github.com/vitejs/vite/blob/main/packages/vite/src/node/ssr/ssrModuleLoader.ts
   const ssrModuleLoader = `
@@ -213,7 +215,7 @@ async function __instantiateModule__(url, urlStack) {
     chunksCode,
     manifestCode,
     ssrModuleLoader,
-    `export default await __ssrLoadModule__('${entryURL}')`
+    `export default await __ssrLoadModule__(${JSON.stringify(entryURL)})`
   ].join('\n\n')
 
   return {
diff --git a/yarn.lock b/yarn.lock
index 0ab33abe950..d94e0534445 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2589,6 +2589,7 @@ __metadata:
     globby: ^13.1.1
     h3: ^0.3.9
     hash-sum: ^2.0.0
+    knitwork: ^0.1.0
     magic-string: ^0.25.7
     mlly: ^0.4.1
     murmurhash-es: ^0.1.1
@@ -2900,6 +2901,7 @@ __metadata:
     globby: ^13.1.1
     hash-sum: ^2.0.0
     jiti: ^1.12.15
+    knitwork: ^0.1.0
     lodash.template: ^4.5.0
     mlly: ^0.4.1
     pathe: ^0.2.0
@@ -2993,6 +2995,7 @@ __metadata:
     http-proxy: ^1.18.1
     is-primitive: ^3.0.1
     jiti: ^1.12.15
+    knitwork: ^0.1.0
     listhen: ^0.2.6
     mime: ^3.0.0
     mlly: ^0.4.1
@@ -3265,6 +3268,7 @@ __metadata:
     escape-string-regexp: ^5.0.0
     externality: ^0.1.6
     fs-extra: ^10.0.0
+    knitwork: ^0.1.0
     magic-string: ^0.25.7
     mlly: ^0.4.1
     p-debounce: ^4.0.0
@@ -12956,6 +12960,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"knitwork@npm:^0.1.0":
+  version: 0.1.0
+  resolution: "knitwork@npm:0.1.0"
+  checksum: 36782ee8fcfb78a18684ff28ab6e829381d45a02cb8eb9efa192b3c521d9f6ff6d1ba3fbc28bdae471a9d251821ea99018a1f3e224e7b3cb62f72bbdb3a4cbd6
+  languageName: node
+  linkType: hard
+
 "kolorist@npm:^1.5.0":
   version: 1.5.1
   resolution: "kolorist@npm:1.5.1"
@@ -14979,6 +14990,7 @@ __metadata:
     hash-sum: ^2.0.0
     hookable: ^5.1.1
     ignore: ^5.2.0
+    knitwork: ^0.1.0
     mlly: ^0.4.1
     murmurhash-es: ^0.1.1
     nuxi: 3.0.0