diff --git a/code/lib/cli/src/build.ts b/code/lib/cli/src/build.ts index f9b9c2ca1dd1..d9cc93877ad6 100644 --- a/code/lib/cli/src/build.ts +++ b/code/lib/cli/src/build.ts @@ -2,8 +2,11 @@ import { sync as readUpSync } from 'read-pkg-up'; import { logger } from '@storybook/node-logger'; import { buildStaticStandalone, withTelemetry } from '@storybook/core-server'; import { cache } from '@storybook/core-common'; +import { ensureReactPeerDeps } from './ensure-react-peer-deps'; export const build = async (cliOptions: any) => { + ensureReactPeerDeps(); + try { const options = { ...cliOptions, diff --git a/code/lib/cli/src/dev.ts b/code/lib/cli/src/dev.ts index a6aa573c16b8..a6094ceca621 100644 --- a/code/lib/cli/src/dev.ts +++ b/code/lib/cli/src/dev.ts @@ -3,10 +3,13 @@ import { sync as readUpSync } from 'read-pkg-up'; import { logger, instance as npmLog } from '@storybook/node-logger'; import { buildDevStandalone, withTelemetry } from '@storybook/core-server'; import { cache } from '@storybook/core-common'; +import { ensureReactPeerDeps } from './ensure-react-peer-deps'; export const dev = async (cliOptions: any) => { process.env.NODE_ENV = process.env.NODE_ENV || 'development'; + ensureReactPeerDeps(); + try { const options = { ...cliOptions, diff --git a/code/lib/cli/src/ensure-react-peer-deps.ts b/code/lib/cli/src/ensure-react-peer-deps.ts new file mode 100644 index 000000000000..9a21528aa6d9 --- /dev/null +++ b/code/lib/cli/src/ensure-react-peer-deps.ts @@ -0,0 +1,24 @@ +import { logger } from '@storybook/node-logger'; +import dedent from 'ts-dedent'; + +export function ensureReactPeerDeps() { + try { + require.resolve('react'); + require.resolve('react-dom'); + } catch (e) { + logger.error(dedent` + Starting in 7.0, react and react-dom are now required peer dependencies of Storybook. + Please install react and react-dom in your project. + + npm: + $ npm add react react-dom --dev + + yarn: + $ yarn add react react-dom --dev + + pnpm: + $ pnpm add react react-dom --dev + `); + process.exit(1); + } +}