fix(nuxt): use relative path to generate plugin variables

packages/kit/src/internal/template.ts

@@ -3,6 +3,8 @@ import lodashTemplate from 'lodash.template'
 import { genSafeVariableName, genDynamicImport, genImport } from 'knitwork'
 
 import type { NuxtTemplate } from '@nuxt/schema'
+import { relative } from 'pathe'
+import { hash } from 'ohash'
 
 export async function compileTemplate (template: NuxtTemplate, ctx: any) {
   const data = { ...ctx, options: template.options }
@@ -23,16 +25,25 @@ export async function compileTemplate (template: NuxtTemplate, ctx: any) {
 
 const serialize = (data: any) => JSON.stringify(data, null, 2).replace(/"{(.+)}"(?=,?$)/gm, r => JSON.parse(r).replace(/^{(.*)}$/, '$1'))
 
-const importSources = (sources: string | string[], { lazy = false } = {}) => {
+const importSources = (sources: string | string[], root: string, { lazy = false } = {}) => {
   if (!Array.isArray(sources)) {
     sources = [sources]
   }
-  return sources.map((src) => {
-    if (lazy) {
-      return `const ${genSafeVariableName(src)} = ${genDynamicImport(src, { comment: `webpackChunkName: ${JSON.stringify(src)}` })}`
-    }
-    return genImport(src, genSafeVariableName(src))
-  }).join('\n')
+  const exports: string[] = []
+  const imports: string[] = []
+  for (const src of sources) {
+    const path = relative(root, src)
+    const variable = genSafeVariableName(path).replace(/_(45|46|47)/g, '_') + '_' + hash(path)
+    exports.push(variable)
+    imports.push(lazy
+      ? `const ${variable} = ${genDynamicImport(src, { comment: `webpackChunkName: ${JSON.stringify(src)}` })}`
+      : genImport(src, variable)
+    )
+  }
+  return {
+    exports,
+    imports
+  }
 }
 
 export const templateUtils = { serialize, importName: genSafeVariableName, importSources }

packages/nuxt/src/core/templates.ts

@@ -48,9 +48,11 @@ export const clientPluginTemplate = {
   filename: 'plugins/client.mjs',
   getContents (ctx: TemplateContext) {
     const clientPlugins = ctx.app.plugins.filter(p => !p.mode || p.mode !== 'server')
+    const rootDir = ctx.nuxt.options.rootDir
+    const { imports, exports } = templateUtils.importSources(clientPlugins.map(p => p.src), rootDir)
     return [
-      templateUtils.importSources(clientPlugins.map(p => p.src)),
-      `export default ${genArrayFromRaw(clientPlugins.map(p => genSafeVariableName(p.src)))}`
+      ...imports,
+      `export default ${genArrayFromRaw(exports)}`
     ].join('\n')
   }
 }
@@ -59,12 +61,14 @@ export const serverPluginTemplate = {
   filename: 'plugins/server.mjs',
   getContents (ctx: TemplateContext) {
     const serverPlugins = ctx.app.plugins.filter(p => !p.mode || p.mode !== 'client')
+    const rootDir = ctx.nuxt.options.rootDir
+    const { imports, exports } = templateUtils.importSources(serverPlugins.map(p => p.src), rootDir)
     return [
       "import preload from '#app/plugins/preload.server'",
-      templateUtils.importSources(serverPlugins.map(p => p.src)),
+      ...imports,
       `export default ${genArrayFromRaw([
         'preload',
-        ...serverPlugins.map(p => genSafeVariableName(p.src))
+        ...exports
       ])}`
     ].join('\n')
   }