[Documentation]: Additional configuration required for Remix Run

[calebpanza]

Describe the problem

When adding Storybook to a brand new remix run application, the following error shows up whenever attempting to run Storybook:

=> Failed to build the preview
Error: The Remix Vite plugin requires the use of a Vite config file
    at configResolved (./node_modules/@remix-run/dev/dist/vite/plugin.js:744:15)
    at async Promise.all (index 2)
    at resolveConfig (file://./node_modules/vite/dist/node/chunks/dep-CB_7IfJ-.js:66404:3)
    at getOptimizeDeps (./node_modules/@storybook/builder-vite/dist/index.js:69:2932)
    at createViteServer (./node_modules/@storybook/builder-vite/dist/index.js:69:3557)
    at Module.start (./node_modules/@storybook/builder-vite/dist/index.js:69:4465)
    at storybookDevServer (./node_modules/@storybook/core/dist/core-server/index.cjs:36000:11)
    at buildOrThrow (./node_modules/@storybook/core/dist/core-server/index.cjs:35017:12)
    at buildDevStandalone (./node_modules/@storybook/core/dist/core-server/index.cjs:37190:78)
    at withTelemetry (./node_modules/@storybook/core/dist/core-server/index.cjs:35757:12)

WARN Broken build, fix the error above.
WARN You may need to refresh the browser

In order to resolve this problem, you have to disable the Remix plugin when Storybook is active. We achieved this using the following:

/** 
 * Update the Vite config to the following
 * file: vite.config.ts
 * /

import { vitePlugin as remix } from "@remix-run/dev";
import { defineConfig } from "vite";
import tsconfigPaths from "vite-tsconfig-paths";

import type { PluginOption } from "vite";

declare module "@remix-run/node" {
  interface Future {
    v3_singleFetch: true;
  }
}

export default defineConfig(() => {
  const plugins: PluginOption[] = [tsconfigPaths()];

  if (!process.env.STORYBOOK) {
    plugins.push(
      remix({
        future: {
          v3_fetcherPersist: true,
          v3_relativeSplatPath: true,
          v3_throwAbortReason: true,
          v3_singleFetch: true,
          v3_lazyRouteDiscovery: true,
        },
      })
    );
  }

  return {
    plugins,
  };
});

/**
 * set the STORYBOOK env programmatically from the storybook main
 * file: .storybook/main.ts
 * /

process.env.STORYBOOK = "true";

import type { StorybookConfig } from "@storybook/react-vite";

const config: StorybookConfig = {
  stories: [
    "../stories/**/*.mdx",
    "../stories/**/*.stories.@(js|jsx|mjs|ts|tsx)",
  ],
  addons: [
    "@storybook/addon-onboarding",
    "@storybook/addon-essentials",
    "@chromatic-com/storybook",
    "@storybook/addon-interactions",
  ],
  framework: {
    name: "@storybook/react-vite",
    options: {},
  },
};

export default config;

Additional context

I am using bun as my package manager/runtime. Below is my package.json as well as the run commands for setting up a new Remix project (as referenced above) and installing storybook

# set up new project
bunx create-remix@latest

# install storybook
bunx storybook@latest init

package.json on the project in question

{
  "name": "web",
  "private": true,
  "sideEffects": false,
  "type": "module",
  "scripts": {
    "build": "remix vite:build",
    "dev": "remix vite:dev",
    "lint": "eslint --ignore-path .gitignore --cache --cache-location ./node_modules/.cache/eslint .",
    "start": "remix-serve ./build/server/index.js",
    "typecheck": "tsc",
    "storybook": "storybook dev -p 6006",
    "build-storybook": "storybook build"
  },
  "dependencies": {
    "@radix-ui/react-slot": "^1.1.0",
    "@remix-run/node": "^2.15.0",
    "@remix-run/react": "^2.15.0",
    "@remix-run/serve": "^2.15.0",
    "class-variance-authority": "^0.7.1",
    "clsx": "^2.1.1",
    "isbot": "^4.1.0",
    "lucide-react": "^0.468.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "tailwind-merge": "^2.5.5",
    "tailwindcss-animate": "^1.0.7"
  },
  "devDependencies": {
    "@chromatic-com/storybook": "^3.2.2",
    "@remix-run/dev": "^2.15.0",
    "@storybook/addon-essentials": "^8.4.7",
    "@storybook/addon-interactions": "^8.4.7",
    "@storybook/addon-onboarding": "^8.4.7",
    "@storybook/blocks": "^8.4.7",
    "@storybook/react": "^8.4.7",
    "@storybook/react-vite": "^8.4.7",
    "@storybook/test": "^8.4.7",
    "@types/react": "^18.2.20",
    "@types/react-dom": "^18.2.7",
    "@typescript-eslint/eslint-plugin": "^6.7.4",
    "@typescript-eslint/parser": "^6.7.4",
    "autoprefixer": "^10.4.19",
    "eslint": "^8.38.0",
    "eslint-import-resolver-typescript": "^3.6.1",
    "eslint-plugin-import": "^2.28.1",
    "eslint-plugin-jsx-a11y": "^6.7.1",
    "eslint-plugin-react": "^7.33.2",
    "eslint-plugin-react-hooks": "^4.6.0",
    "eslint-plugin-storybook": "^0.11.1",
    "postcss": "^8.4.38",
    "storybook": "^8.4.7",
    "tailwindcss": "^3.4.4",
    "typescript": "^5.1.6",
    "vite": "^5.1.0",
    "vite-tsconfig-paths": "^4.2.1"
  },
  "engines": {
    "node": ">=20.0.0"
  }
}