fix(storybook): Adding vite-plugin-node-polyfills to SB Vite config (#12050)

Our vite package already depends on vite-plugin-node-polyfills, but yarn
would sometimes place that package inside node_modules inside the vite
package instead of at the root node_modules. So when it was requested by
Storybook's vite node wouldn't find it. Explicitly adding it to
Storybook and its vite config solves this.

Fix first discovered and merged here:
cedarjs/cedar#2

Author: Tobbe

packages/storybook/package.json

@@ -56,7 +56,8 @@
     "@storybook/react": "7.6.20",
     "magic-string": "0.30.11",
     "react-docgen": "7.0.3",
-    "unplugin-auto-import": "0.18.3"
+    "unplugin-auto-import": "0.18.3",
+    "vite-plugin-node-polyfills": "0.23.0"
   },
   "devDependencies": {
     "@types/node": "20.17.10",

packages/storybook/src/preset.ts

@@ -1,7 +1,8 @@
-import { dirname, join } from 'path'
+import path from 'node:path'
 
 import type { PresetProperty } from '@storybook/types'
 import { mergeConfig } from 'vite'
+import { nodePolyfills } from 'vite-plugin-node-polyfills'
 
 import { getPaths } from '@redwoodjs/project-config'
 
@@ -12,7 +13,7 @@ import { reactDocgen } from './plugins/react-docgen'
 import type { StorybookConfig } from './types'
 
 const getAbsolutePath = (input: string) =>
-  dirname(require.resolve(join(input, 'package.json')))
+  path.dirname(require.resolve(path.join(input, 'package.json')))
 
 export const core: PresetProperty<'core'> = {
   builder: getAbsolutePath('@storybook/builder-vite'),
@@ -32,6 +33,7 @@ export const viteFinal: StorybookConfig['viteFinal'] = async (config) => {
 
   // Needs to run before the react plugin, so add to the front
   plugins.unshift(reactDocgen())
+  plugins.unshift(nodePolyfills())
 
   return mergeConfig(config, {
     // This is necessary as it otherwise just points to the `web` directory,

yarn.lock

@@ -27790,6 +27790,7 @@ __metadata:
     typescript: "npm:5.6.2"
     unplugin-auto-import: "npm:0.18.3"
     vite: "npm:5.4.16"
+    vite-plugin-node-polyfills: "npm:0.23.0"
   peerDependencies:
     "@redwoodjs/project-config": "workspace:*"
     "@redwoodjs/router": "workspace:*"