Merge pull request #24177 from storybookjs/yann/missing-sb-builder-error

Core: Unify error when builder is missing

code/lib/core-events/src/errors/server-errors.ts

@@ -306,3 +306,25 @@ export class CriticalPresetLoadError extends StorybookError {
     `;
   }
 }
+
+export class MissingBuilderError extends StorybookError {
+  readonly category = Category.CORE_SERVER;
+
+  readonly code = 3;
+
+  public readonly documentation = 'https://github.com/storybookjs/storybook/issues/24071';
+
+  template() {
+    return dedent`
+      Storybook could not find a builder configuration for your project. 
+      Builders normally come from a framework package e.g. '@storybook/react-vite', or from builder packages e.g. '@storybook/builder-vite'.
+      
+      - Does your main config file contain a 'framework' field configured correctly?
+      - Is the Storybook framework package installed correctly?
+      - If you don't use a framework, does your main config contain a 'core.builder' configured correctly?
+      - Are you in a monorepo and perhaps the framework package is hoisted incorrectly?
+
+      If you believe this is a bug, please describe your issue in detail on Github.
+    `;
+  }
+}

code/lib/core-server/src/build-dev.ts

@@ -19,6 +19,7 @@ import { global } from '@storybook/global';
 import { telemetry } from '@storybook/telemetry';
 
 import { join, resolve } from 'path';
+import { MissingBuilderError } from '@storybook/core-events/server-errors';
 import { storybookDevServer } from './dev-server';
 import { outputStats } from './utils/output-stats';
 import { outputStartupInformation } from './utils/output-startup-information';
@@ -89,7 +90,9 @@ export async function buildDevStandalone(
 
   const { renderer, builder, disableTelemetry } = await presets.apply<CoreConfig>('core', {});
 
-  invariant(builder, 'No builder configured in core.builder');
+  if (!builder) {
+    throw new MissingBuilderError();
+  }
 
   if (!options.disableTelemetry && !disableTelemetry) {
     if (versionCheck.success && !versionCheck.cached) {

code/lib/core-server/src/dev-server.ts

@@ -7,6 +7,7 @@ import type { CoreConfig, Options, StorybookConfig } from '@storybook/types';
 import { logConfig } from '@storybook/core-common';
 
 import { logger } from '@storybook/node-logger';
+import { MissingBuilderError } from '@storybook/core-events/server-errors';
 import { getMiddleware } from './utils/middleware';
 import { getServerAddresses } from './utils/server-address';
 import { getServer } from './utils/server-init';
@@ -67,7 +68,10 @@ export async function storybookDevServer(options: Options) {
     server.listen({ port, host }, (error: Error) => (error ? reject(error) : resolve()));
   });
 
-  invariant(core?.builder, 'no builder configured!');
+  if (!core?.builder) {
+    throw new MissingBuilderError();
+  }
+
   const builderName = typeof core?.builder === 'string' ? core.builder : core?.builder?.name;
 
   const [previewBuilder, managerBuilder] = await Promise.all([

code/lib/core-server/src/utils/get-builders.ts

@@ -1,6 +1,6 @@
 import type { Builder, CoreConfig, Options } from '@storybook/types';
+import { MissingBuilderError } from '@storybook/core-events/server-errors';
 import { pathToFileURL } from 'node:url';
-import invariant from 'tiny-invariant';
 
 export async function getManagerBuilder(): Promise<Builder<unknown>> {
   return import('@storybook/builder-manager');
@@ -20,7 +20,11 @@ export async function getPreviewBuilder(
 
 export async function getBuilders({ presets, configDir }: Options): Promise<Builder<unknown>[]> {
   const { builder } = await presets.apply<CoreConfig>('core', {});
-  invariant(builder, 'no builder configured!');
+
+  if (!builder) {
+    throw new MissingBuilderError();
+  }
+
   const builderName = typeof builder === 'string' ? builder : builder.name;
 
   return Promise.all([getPreviewBuilder(builderName, configDir), getManagerBuilder()]);