fix(storybook): Fix import issues with storybook vite

.changesets/10961.md

@@ -0,0 +1,3 @@
+- fix(storybook): Fix import issues with storybook vite (#10961) by @Josh-Walker-GM
+
+Fixes an issue with the `yarn rw storybook-vite` command where it would not start due to an import issue. 

packages/storybook/build.ts

@@ -1,5 +1,3 @@
-import { writeFileSync } from 'node:fs'
-
 import { build, defaultBuildOptions } from '@redwoodjs/framework-tools'
 
 await build({
@@ -9,20 +7,3 @@ await build({
     packages: 'external',
   },
 })
-
-await build({
-  buildOptions: {
-    ...defaultBuildOptions,
-    outdir: 'dist/cjs',
-    format: 'cjs',
-    packages: 'external',
-  },
-})
-
-// Place a package.json file with `type: commonjs` in the dist folder so that
-// all .js files are treated as CommonJS files.
-writeFileSync('dist/cjs/package.json', JSON.stringify({ type: 'commonjs' }))
-
-// Place a package.json file with `type: module` in the dist/esm folder so that
-// all .js files are treated as ES Module files.
-writeFileSync('dist/package.json', JSON.stringify({ type: 'module' }))

packages/storybook/package.json

@@ -21,22 +21,18 @@
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
-      "require": "./dist/cjs/index.js",
-      "import": "./dist/index.js"
+      "default": "./dist/index.js"
     },
     "./preset": {
       "types": "./dist/preset.d.ts",
-      "require": "./dist/cjs/preset.js",
-      "import": "./dist/preset.js"
+      "default": "./dist/preset.js"
     },
     "./dist/mocks/MockRouter": {
-      "require": "./dist/cjs/mocks/MockRouter.js",
-      "import": "./dist/mocks/MockRouter.js"
+      "default": "./dist/mocks/MockRouter.js"
     },
     "./dist/preview.js": "./dist/preview.js",
     "./package.json": "./package.json"
   },
-  "main": "dist/cjs/index.js",
   "module": "dist/index.js",
   "types": "dist/index.d.ts",
   "files": [

packages/storybook/src/preset.ts

@@ -48,5 +48,15 @@ export const viteFinal: StorybookConfig['viteFinal'] = async (config) => {
         '~__REDWOOD__USER_WEB_SRC': redwoodProjectPaths.web.src,
       },
     },
+    optimizeDeps: {
+      // Without this, on first run, Vite throws: `The file does not exist at
+      // "{project path}/web/node_modules/.cache/sb-vite/deps/DocsRenderer-NNNQARDV-DEXCJJZJ.js?v=c640a8fa"
+      // which is in the optimize deps directory.`
+      // This refers to @storybook/addon-docs, which is included as part of @storybook/addon-essentials.
+      // the docs addon then includes itself here: https://github.com/storybookjs/storybook/blob/a496ec48c708eed753a5251d55fa07947a869e62/code/addons/docs/src/preset.ts#L198C3-L198C27
+      // which I believe gets included by the builder here: https://github.com/storybookjs/storybook/blob/a496ec48c708eed753a5251d55fa07947a869e62/code/builders/builder-vite/src/optimizeDeps.ts#L117
+      // TODO: Figure out why this error is being thrown so that this can be removed.
+      exclude: ['@storybook/addon-docs'],
+    },
   })
 }