From 8df579e36ae2b7ef8c03d39c0ce3d539dca95af8 Mon Sep 17 00:00:00 2001
From: josedario87 <jodarioel87@gmail.com>
Date: Sun, 5 Oct 2025 12:43:01 -0600
Subject: [PATCH] fix: resolve @nuxt/kit module import error in browser

- Replace external module references with empty stub file
- Add .nuxt-stubs/empty.mjs to provide browser-compatible module
- Update workaround to resolve server-only modules to stub file instead of marking as external
---
 nuxt4-app/.nuxt-stubs/empty.mjs     |  1 +
 nuxt4-app/nuxt.config.workaround.ts | 40 +++++++++++++++++++----------
 2 files changed, 28 insertions(+), 13 deletions(-)
 create mode 100644 nuxt4-app/.nuxt-stubs/empty.mjs

diff --git a/nuxt4-app/.nuxt-stubs/empty.mjs b/nuxt4-app/.nuxt-stubs/empty.mjs
new file mode 100644
index 0000000..b1c6ea4
--- /dev/null
+++ b/nuxt4-app/.nuxt-stubs/empty.mjs
@@ -0,0 +1 @@
+export default {}
diff --git a/nuxt4-app/nuxt.config.workaround.ts b/nuxt4-app/nuxt.config.workaround.ts
index 830e6ac..ebbda19 100644
--- a/nuxt4-app/nuxt.config.workaround.ts
+++ b/nuxt4-app/nuxt.config.workaround.ts
@@ -2,30 +2,44 @@
 // This is a temporary fix until @nuxt/ui properly handles ssr: false
 
 import type { Plugin } from 'vite'
+import { fileURLToPath } from 'url'
+import { dirname, resolve } from 'path'
+
+const __filename = fileURLToPath(import.meta.url)
+const __dirname = dirname(__filename)
+const emptyModulePath = resolve(__dirname, '.nuxt-stubs/empty.mjs')
 
 export function disableImportProtection(): Plugin {
   return {
     name: 'disable-import-protection-for-nuxt-ui',
     enforce: 'pre',
     resolveId(id, importer) {
-      // External node binary files
-      if (id.endsWith('.node')) {
-        return { id, external: true }
-      }
+      // Server-only packages that should be stubbed for client bundle
+      const serverPackages = [
+        '@nuxt/kit',
+        '@tailwindcss/node',
+        '@tailwindcss/oxide',
+        'jiti'
+      ]
 
-      // External Node.js built-in modules
-      const nodeModules = ['fs', 'path', 'url', 'fs/promises', 'node:url', 'node:module', 'node:fs', 'node:path']
-      if (nodeModules.includes(id) || id.startsWith('node:')) {
-        return { id, external: true }
-      }
-
-      // External server-only packages from @nuxt/ui imports
-      const serverPackages = ['@nuxt/kit', '@tailwindcss/node', '@tailwindcss/oxide', 'jiti']
       for (const pkg of serverPackages) {
         if (id === pkg || id.startsWith(pkg + '/')) {
-          return { id, external: true }
+          return emptyModulePath
         }
       }
+
+      // Stub .node binary files
+      if (id.endsWith('.node')) {
+        return emptyModulePath
+      }
+
+      // Stub Node.js built-in modules for client bundle
+      const nodeModules = ['fs', 'path', 'url', 'fs/promises']
+      const nodePrefix = ['node:url', 'node:module', 'node:fs', 'node:path']
+
+      if (nodeModules.includes(id) || nodePrefix.includes(id) || id.startsWith('node:')) {
+        return emptyModulePath
+      }
     }
   }
 }