Repository: storybook
Issue: [Documentation]: Additional configuration required for Remix Run
Labels: documentation

### 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

```sh
# set up new project
bunx create-remix@latest
```

```sh
# install storybook
bunx storybook@latest init
```

`package.json` on the project in question
```json
{
  "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"
  }
}
```