Merge pull request #14198 from storybookjs/14139-fix-webpack-stats

Core: Fix webpack stats
storybookjs · Mar 11, 2021 · 606050f · 606050f
2 parents 90366f7 + 09fc7eb
commit 606050f
Show file tree

Hide file tree

Showing 7 changed files with 36 additions and 30 deletions.
diff --git a/docs/api/cli-options.md b/docs/api/cli-options.md
@@ -29,7 +29,7 @@ Usage: start-storybook [options]
 | --quiet                            | Suppress verbose build output                                                                                                                  | `start-storybook --quiet`                                 |
 | --no-dll                           | Do not use dll reference (no-op)                                                                                                               | `start-storybook --no-dll`                                |
 | --debug-webpack                    | Display final webpack configurations for debugging purposes                                                                                    | `start-storybook --debug-webpack`                         |
-| `--webpack-stats-json [directory]` | Write Webpack Stats JSON to disk                                                                                                               | `start-storybook --webpack-stats-json /tmp/webpack-stats` |
+| `--webpack-stats-json <directory>` | Write Webpack Stats JSON to disk                                                                                                               | `start-storybook --webpack-stats-json /tmp/webpack-stats` |
 | --docs                             | Starts Storybook in documentation mode. Learn more about it in [here](../writing-docs/build-documentation.md#preview-storybooks-documentation) | `start-storybook --docs`                                  |
 | --no-manager-cache                 | Disables Storybook's manager caching mechanism. See note below.                                                                                | `start-storybook --no-manager-cache`                      |
 
@@ -55,7 +55,7 @@ Usage: build-storybook [options]
 | --quiet                            | Suppress verbose build output                                                                                                                   | `build-storybook --quiet`                                 |
 | --no-dll                           | Do not use dll reference (no-op)                                                                                                                | `build-storybook --no-dll`                                |
 | --debug-webpack                    | Display final webpack configurations for debugging purposes                                                                                     | `build-storybook --debug-webpack`                         |
-| `--webpack-stats-json [directory]` | Write Webpack Stats JSON to disk                                                                                                                | `start-storybook --webpack-stats-json /tmp/webpack-stats` |
+| `--webpack-stats-json <directory>` | Write Webpack Stats JSON to disk                                                                                                                | `start-storybook --webpack-stats-json /tmp/webpack-stats` |
 | --docs                             | Builds Storybook in documentation mode. Learn more about it in [here](../writing-docs/build-documentation.md#publish-storybooks-documentation)) | `build-storybook --docs`                                  |
 
 <div class="aside">

diff --git a/examples/official-storybook/package.json b/examples/official-storybook/package.json
@@ -8,7 +8,7 @@
     "do-storyshots-puppeteer": "../../node_modules/.bin/jest --projects=./storyshots-puppeteer",
     "generate-addon-jest-testresults": "jest --config=tests/addon-jest.config.json --json --outputFile=stories/addon-jest.testresults.json",
     "graphql": "node ./graphql-server/index.js",
-    "packtracker": "yarn storybook --smoke-test --webpack-stats-json --quiet && cross-env PT_PROJECT_TOKEN=1af1d41b-d737-41d4-ac00-53c8f3913b53 packtracker-upload --stats=./node_modules/.cache/storybook/public/manager-stats.json",
+    "packtracker": "yarn storybook --smoke-test --webpack-stats-json /tmp --quiet && cross-env PT_PROJECT_TOKEN=1af1d41b-d737-41d4-ac00-53c8f3913b53 packtracker-upload --stats=/tmp/manager-stats.json",
     "storybook": "cross-env STORYBOOK_DISPLAY_WARNING=true DISPLAY_WARNING=true start-storybook -p 9011 -c ./",
     "storyshots-puppeteer": "yarn run build-storybook && yarn run do-storyshots-puppeteer"
   },

diff --git a/lib/builder-webpack4/src/index.ts b/lib/builder-webpack4/src/index.ts
@@ -39,6 +39,13 @@ export const executor = {
   get: webpack,
 };
 
+export const makeStatsFromError: (err: string) => Stats = (err) =>
+  ({
+    hasErrors: () => true,
+    hasWarnings: () => false,
+    toJson: () => ({ warnings: [] as any[], errors: [err] }),
+  } as any);
+
 export const start: WebpackBuilder['start'] = async ({ startTime, options, router }) => {
   const config = await getConfig(options);
   const compiler = executor.get(config);
@@ -48,11 +55,7 @@ export const start: WebpackBuilder['start'] = async ({ startTime, options, route
     return {
       bail,
       totalTime: process.hrtime(startTime),
-      stats: ({
-        hasErrors: () => true,
-        hasWarngins: () => false,
-        toJson: () => ({ warnings: [] as any[], errors: [err] }),
-      } as any) as Stats,
+      stats: makeStatsFromError(err),
     };
   }
 
@@ -117,10 +120,10 @@ export const build: WebpackBuilder['build'] = async ({ options, startTime }) =>
   if (!compiler) {
     const err = `${config.name}: missing webpack compiler at runtime!`;
     logger.error(err);
-    return;
+    return Promise.resolve(makeStatsFromError(err));
   }
 
-  await new Promise<Stats>((succeed, fail) => {
+  return new Promise((succeed, fail) => {
     compiler.run((error, stats) => {
       if (error || !stats || stats.hasErrors()) {
         logger.error('=> Failed to build the preview');

diff --git a/lib/core-server/src/cli/dev.ts b/lib/core-server/src/cli/dev.ts
@@ -1,7 +1,7 @@
 import program, { CommanderStatic } from 'commander';
 import chalk from 'chalk';
 import { logger } from '@storybook/node-logger';
-import { CLIOptions, resolvePathInStorybookCache } from '@storybook/core-common';
+import { CLIOptions } from '@storybook/core-common';
 import { parseList, getEnvConfig, checkDeprecatedFlags } from './utils';
 
 export async function getDevCli(packageJson: {
@@ -42,11 +42,7 @@ export async function getDevCli(packageJson: {
     .option('--docs-dll', 'Use Docs dll reference (legacy)')
     .option('--ui-dll', 'Use UI dll reference (legacy)')
     .option('--debug-webpack', 'Display final webpack configurations for debugging purposes')
-    .option(
-      '--webpack-stats-json [directory]',
-      'Write Webpack Stats JSON to disk',
-      resolvePathInStorybookCache(`public/`)
-    )
+    .option('--webpack-stats-json [directory]', 'Write Webpack Stats JSON to disk')
     .option(
       '--preview-url [string]',
       'Disables the default storybook preview and lets your use your own'

diff --git a/lib/core-server/src/cli/prod.ts b/lib/core-server/src/cli/prod.ts
@@ -1,7 +1,6 @@
 import program, { CommanderStatic } from 'commander';
 import chalk from 'chalk';
 import { logger } from '@storybook/node-logger';
-import { resolvePathInStorybookCache } from '@storybook/core-common';
 import { parseList, getEnvConfig, checkDeprecatedFlags } from './utils';
 
 export interface ProdCliOptions {
@@ -37,11 +36,7 @@ export function getProdCli(packageJson: {
     .option('--docs-dll', 'Use Docs dll reference (legacy)')
     .option('--ui-dll', 'Use UI dll reference (legacy)')
     .option('--debug-webpack', 'Display final webpack configurations for debugging purposes')
-    .option(
-      '--webpack-stats-json [directory]',
-      'Write Webpack Stats JSON to disk',
-      resolvePathInStorybookCache(`public/`)
-    )
+    .option('--webpack-stats-json [directory]', 'Write Webpack Stats JSON to disk')
     .option(
       '--preview-url [string]',
       'Disables the default storybook preview and lets your use your own'

diff --git a/lib/core-server/src/core-presets.test.ts b/lib/core-server/src/core-presets.test.ts
@@ -193,8 +193,8 @@ describe('dev cli flags', () => {
     await buildDevStandalone({ ...cliOptions, webpackStatsJson: '/tmp/dir' });
     expect(outputStats).toHaveBeenCalledWith(
       '/tmp/dir',
-      expect.objectContaining({}),
-      expect.objectContaining({})
+      expect.objectContaining({ toJson: expect.any(Function) }),
+      expect.objectContaining({ toJson: expect.any(Function) })
     );
   });
 
@@ -233,8 +233,8 @@ describe('build cli flags', () => {
     await buildStaticStandalone({ ...cliOptions, webpackStatsJson: '/tmp/dir' });
     expect(outputStats).toHaveBeenCalledWith(
       '/tmp/dir',
-      expect.objectContaining({}),
-      expect.objectContaining({})
+      expect.objectContaining({ toJson: expect.any(Function) }),
+      expect.objectContaining({ toJson: expect.any(Function) })
     );
   });
 });
diff --git a/lib/core-server/src/manager/builder.ts b/lib/core-server/src/manager/builder.ts
@@ -19,6 +19,13 @@ export const executor = {
   get: webpack,
 };
 
+export const makeStatsFromError = (err: string) =>
+  (({
+    hasErrors: () => true,
+    hasWarnings: () => false,
+    toJson: () => ({ warnings: [] as any[], errors: [err] }),
+  } as any) as Stats);
+
 export const start: WebpackBuilder['start'] = async ({ startTime, options, router }) => {
   const prebuiltDir = await getPrebuiltDir(options);
   const config = await getConfig(options);
@@ -47,7 +54,12 @@ export const start: WebpackBuilder['start'] = async ({ startTime, options, route
   if (!compiler) {
     const err = `${config.name}: missing webpack compiler at runtime!`;
     logger.error(err);
-    return;
+    // eslint-disable-next-line consistent-return
+    return {
+      bail,
+      totalTime: process.hrtime(startTime),
+      stats: makeStatsFromError(err),
+    };
   }
 
   const { handler, modulesCount } = await useProgressReporting(router, startTime, options);
@@ -103,10 +115,10 @@ export const build: WebpackBuilder['build'] = async ({ options, startTime }) =>
   if (!compiler) {
     const err = `${config.name}: missing webpack compiler at runtime!`;
     logger.error(err);
-    return;
+    return Promise.resolve(makeStatsFromError(err));
   }
 
-  await new Promise<void>((succeed, fail) => {
+  return new Promise((succeed, fail) => {
     compiler.run((error, stats) => {
       if (error || !stats || stats.hasErrors()) {
         logger.error('=> Failed to build the manager');
@@ -131,7 +143,7 @@ export const build: WebpackBuilder['build'] = async ({ options, startTime }) =>
         );
         statsData?.warnings?.forEach((e) => logger.warn(e));
 
-        succeed();
+        succeed(stats);
       }
     });
   });