Skip Rollup "use client"directive warnings in Storybook

Author: colinrotherham

.storybook/main.ts

@@ -1,6 +1,7 @@
-import type { StorybookConfig } from '@storybook/react-vite';
-import { mergeConfig } from 'vite';
+import { type StorybookConfig } from '@storybook/react-vite';
+import { mergeConfig, type InlineConfig } from 'vite';
 import tsConfigPaths from 'vite-tsconfig-paths';
+import { isLogIgnored } from '../rollup.config.js';
 
 const config: StorybookConfig = {
   stories: ['../stories/**/*.stories.@(ts|tsx)', '../stories/**/*.mdx'],
@@ -16,6 +17,17 @@ const config: StorybookConfig = {
 
   viteFinal(config) {
     return mergeConfig(config, {
+      build: {
+        rollupOptions: {
+          onwarn(warning, handler) {
+            if (isLogIgnored(warning)) {
+              return;
+            }
+
+            handler(warning);
+          },
+        },
+      },
       css: {
         preprocessorOptions: {
           scss: {
@@ -32,7 +44,7 @@ const config: StorybookConfig = {
           projects: ['./tsconfig.dev.json', './tsconfig.build.json'],
         }),
       ],
-    });
+    } satisfies InlineConfig);
   },
 };
 

rollup.config.js

@@ -40,7 +40,7 @@ export default defineConfig(
         },
       ],
       external: ['react/jsx-runtime', ...external],
-      jsx: /** @type {const} */ ('react-jsx'),
+      jsx: 'react-jsx',
       treeshake: false,
       plugins: [
         nodeResolve({
@@ -63,10 +63,7 @@ export default defineConfig(
 
       // Handle warnings as errors
       onwarn(warning) {
-        const { code, message } = warning;
-
-        // Skip warnings about "use client" directives
-        if (code === 'MODULE_LEVEL_DIRECTIVE' && message.includes(`"use client"`)) {
+        if (isLogIgnored(warning)) {
           return;
         }
 
@@ -77,5 +74,21 @@ export default defineConfig(
 );
 
 /**
- * @import { OutputOptions, RollupOptions } from 'rollup'
+ * Whether to ignore Rollup log messages
+ *
+ * @param {RollupLog} warning
+ */
+export function isLogIgnored(warning) {
+  const { code, message } = warning;
+
+  // Skip warnings related to "use client" directives including
+  // source map issues when directives are bundled by Storybook
+  return (
+    code === 'SOURCEMAP_ERROR' ||
+    (code === 'MODULE_LEVEL_DIRECTIVE' && message.includes('"use client"'))
+  );
+}
+
+/**
+ * @import { OutputOptions, RollupLog, RollupOptions } from 'rollup'
  */