From 7a73e5e9b2b9040f6e4c04206bc0a7c62a484ddf Mon Sep 17 00:00:00 2001
From: dewa3355 <134440439+dewa3355@users.noreply.github.com>
Date: Tue, 1 Sep 2026 09:53:26 -0700
Subject: [PATCH 1/4] docs: note Storybook webpack externals when using withUt

---
 docs/src/app/(docs)/concepts/theming/page.mdx | 19 +++++++++++++++++++
 1 file changed, 19 insertions(+)

diff --git a/docs/src/app/(docs)/concepts/theming/page.mdx b/docs/src/app/(docs)/concepts/theming/page.mdx
index 7537241a6c..17eca97ce6 100644
--- a/docs/src/app/(docs)/concepts/theming/page.mdx
+++ b/docs/src/app/(docs)/concepts/theming/page.mdx
@@ -230,6 +230,25 @@ export function Page() {
   </Tab>
 </Tabs>
 
+<Note>
+  If you wrap your Tailwind config with `withUt` and use Storybook with webpack,
+  Storybook may fail to resolve Node builtins that `withUt` imports. Map them in
+  `.storybook/main.ts`:
+
+```ts
+// .storybook/main.ts
+webpackFinal: async (config) => {
+  config.externals = config.externals || {};
+  Object.assign(config.externals, {
+    "node:path": "path",
+    "node:module": "module",
+  });
+  return config;
+},
+```
+
+</Note>
+
 <Note>
   If you're not wrapping your config as shown above, you have to import our
   stylesheet into your app. Otherwise, components will not look right.

From 42f6bfbcf543cee6a8b4aaaccc3d08b3869d8ae6 Mon Sep 17 00:00:00 2001
From: Cursor Agent <cursoragent@cursor.com>
Date: Wed, 2 Sep 2026 06:14:24 +0000
Subject: [PATCH 2/4] docs: merge Storybook webpack externals without
 clobbering

Co-authored-by: dewa3355 <dewa3355@users.noreply.github.com>
---
 docs/src/app/(docs)/concepts/theming/page.mdx | 12 +++++++++---
 1 file changed, 9 insertions(+), 3 deletions(-)

diff --git a/docs/src/app/(docs)/concepts/theming/page.mdx b/docs/src/app/(docs)/concepts/theming/page.mdx
index 17eca97ce6..b475fbbdc6 100644
--- a/docs/src/app/(docs)/concepts/theming/page.mdx
+++ b/docs/src/app/(docs)/concepts/theming/page.mdx
@@ -238,11 +238,17 @@ export function Page() {
 ```ts
 // .storybook/main.ts
 webpackFinal: async (config) => {
-  config.externals = config.externals || {};
-  Object.assign(config.externals, {
+  const nodeExternals = {
     "node:path": "path",
     "node:module": "module",
-  });
+  };
+  if (Array.isArray(config.externals)) {
+    config.externals.push(nodeExternals);
+  } else if (config.externals) {
+    config.externals = [config.externals, nodeExternals];
+  } else {
+    config.externals = nodeExternals;
+  }
   return config;
 },
 ```

From 8dda74dccdb3b719f8cff6be9081d87decd8c6ee Mon Sep 17 00:00:00 2001
From: dewa3355 <134440439+dewa3355@users.noreply.github.com>
Date: Wed, 2 Sep 2026 01:55:12 -0700
Subject: [PATCH 3/4] docs: complete Storybook withUt webpack example

Address CodeRabbit: full Storybook export + commonjs externals.
---
 docs/src/app/(docs)/concepts/theming/page.mdx | 35 +++++++++++--------
 1 file changed, 20 insertions(+), 15 deletions(-)

diff --git a/docs/src/app/(docs)/concepts/theming/page.mdx b/docs/src/app/(docs)/concepts/theming/page.mdx
index b475fbbdc6..664ecae1d5 100644
--- a/docs/src/app/(docs)/concepts/theming/page.mdx
+++ b/docs/src/app/(docs)/concepts/theming/page.mdx
@@ -233,24 +233,29 @@ export function Page() {
 <Note>
   If you wrap your Tailwind config with `withUt` and use Storybook with webpack,
   Storybook may fail to resolve Node builtins that `withUt` imports. Map them in
-  `.storybook/main.ts`:
+  `.storybook/main.ts` (merge `webpackFinal` into your existing export if you
+  already have one):
 
 ```ts
 // .storybook/main.ts
-webpackFinal: async (config) => {
-  const nodeExternals = {
-    "node:path": "path",
-    "node:module": "module",
-  };
-  if (Array.isArray(config.externals)) {
-    config.externals.push(nodeExternals);
-  } else if (config.externals) {
-    config.externals = [config.externals, nodeExternals];
-  } else {
-    config.externals = nodeExternals;
-  }
-  return config;
-},
+export default {
+  // ...your existing Storybook config
+  webpackFinal: async (config) => {
+    const nodeExternals = {
+      // commonjs form avoids webpack's default `var` externalsType
+      "node:path": "commonjs path",
+      "node:module": "commonjs module",
+    };
+    if (Array.isArray(config.externals)) {
+      config.externals.push(nodeExternals);
+    } else if (config.externals) {
+      config.externals = [config.externals, nodeExternals];
+    } else {
+      config.externals = nodeExternals;
+    }
+    return config;
+  },
+};
 ```
 
 </Note>

From 3dc81f546f98ad2821df58762c533cabaede0e75 Mon Sep 17 00:00:00 2001
From: dewa3355 <134440439+dewa3355@users.noreply.github.com>
Date: Wed, 2 Sep 2026 03:07:26 -0700
Subject: [PATCH 4/4] docs: type Storybook withUt webpack example

---
 docs/src/app/(docs)/concepts/theming/page.mdx | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/docs/src/app/(docs)/concepts/theming/page.mdx b/docs/src/app/(docs)/concepts/theming/page.mdx
index 664ecae1d5..58b3237923 100644
--- a/docs/src/app/(docs)/concepts/theming/page.mdx
+++ b/docs/src/app/(docs)/concepts/theming/page.mdx
@@ -238,7 +238,9 @@ export function Page() {
 
 ```ts
 // .storybook/main.ts
-export default {
+import type { StorybookConfig } from "@storybook/react-webpack5";
+
+const config: StorybookConfig = {
   // ...your existing Storybook config
   webpackFinal: async (config) => {
     const nodeExternals = {
@@ -256,6 +258,8 @@ export default {
     return config;
   },
 };
+
+export default config;
 ```
 
 </Note>