From 1bc5a848aca0d47d84a2d67498d0d312de67ae63 Mon Sep 17 00:00:00 2001 From: Valentin Palkovic Date: Thu, 30 Nov 2023 11:31:57 +0100 Subject: [PATCH 1/4] React-Docgen: Make error-handling more gentle --- .../src/framework-preset-react-docs.ts | 3 +++ .../src/loaders/react-docgen-loader.ts | 22 ++++++++++++++++--- 2 files changed, 22 insertions(+), 3 deletions(-) diff --git a/code/presets/react-webpack/src/framework-preset-react-docs.ts b/code/presets/react-webpack/src/framework-preset-react-docs.ts index 321e032f43d5..27a01a7307ab 100644 --- a/code/presets/react-webpack/src/framework-preset-react-docs.ts +++ b/code/presets/react-webpack/src/framework-preset-react-docs.ts @@ -11,6 +11,7 @@ export const webpackFinal: StorybookConfig['webpackFinal'] = async ( if (!hasDocsOrControls(options)) return config; const typescriptOptions = await options.presets.apply('typescript', {} as any); + const debug = options.loglevel === 'debug'; const { reactDocgen, reactDocgenTypescriptOptions } = typescriptOptions || {}; @@ -34,6 +35,7 @@ export const webpackFinal: StorybookConfig['webpackFinal'] = async ( ), options: { babelOptions, + debug, }, exclude: /node_modules/, }, @@ -60,6 +62,7 @@ export const webpackFinal: StorybookConfig['webpackFinal'] = async ( ), options: { babelOptions, + debug, }, exclude: /node_modules/, }, diff --git a/code/presets/react-webpack/src/loaders/react-docgen-loader.ts b/code/presets/react-webpack/src/loaders/react-docgen-loader.ts index aa1724fd880f..9f3ff5278b9e 100644 --- a/code/presets/react-webpack/src/loaders/react-docgen-loader.ts +++ b/code/presets/react-webpack/src/loaders/react-docgen-loader.ts @@ -9,6 +9,8 @@ import { import MagicString from 'magic-string'; import type { LoaderContext } from 'webpack'; import type { Handler, NodePath, babelTypes as t, Documentation } from 'react-docgen'; +import { logger } from '@storybook/node-logger'; +import type { TransformOptions } from '@babel/core'; const { getNameOrValue, isReactForwardRefCall } = utils; @@ -56,11 +58,14 @@ const defaultResolver = new docgenResolver.FindExportedDefinitionsResolver(); const defaultImporter = docgenImporters.fsImporter; const handlers = [...defaultHandlers, actualNameHandler]; -export default async function reactDocgenLoader(this: LoaderContext, source: string) { +export default async function reactDocgenLoader( + this: LoaderContext<{ babelOptions: TransformOptions; debug: boolean }>, + source: string +) { const callback = this.async(); // get options const options = this.getOptions() || {}; - const { babelOptions = {} } = options; + const { babelOptions = {}, debug = false } = options; const { plugins, presets } = babelOptions; @@ -94,7 +99,18 @@ export default async function reactDocgenLoader(this: LoaderContext, source if (error.code === ERROR_CODES.MISSING_DEFINITION) { callback(null, source); } else { - callback(error); + if (!debug) { + logger.warn( + `Failed to parse ${this.resourcePath} with react-docgen. Rerun Storybook with --loglevel=debug to get more info.` + ); + } else { + logger.warn( + `Failed to parse ${this.resourcePath} with react-docgen. Please use the below error message and the content of the file which causes the error to report the issue to the maintainers of react-docgen. https://github.com/reactjs/react-docgen` + ); + logger.error(error); + } + + callback(null, source); } } } From 33c8aa23a136b1f90fa4306efdc240afeacbbacc Mon Sep 17 00:00:00 2001 From: Valentin Palkovic Date: Thu, 30 Nov 2023 13:00:25 +0100 Subject: [PATCH 2/4] React-Docgen: Do not process stories files --- code/presets/react-webpack/src/framework-preset-react-docs.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/code/presets/react-webpack/src/framework-preset-react-docs.ts b/code/presets/react-webpack/src/framework-preset-react-docs.ts index 27a01a7307ab..007fa5598ee7 100644 --- a/code/presets/react-webpack/src/framework-preset-react-docs.ts +++ b/code/presets/react-webpack/src/framework-preset-react-docs.ts @@ -37,7 +37,7 @@ export const webpackFinal: StorybookConfig['webpackFinal'] = async ( babelOptions, debug, }, - exclude: /node_modules/, + exclude: /(\.stories\.(js|jsx|ts|tsx))|(node_modules)/, }, ], }, @@ -64,7 +64,7 @@ export const webpackFinal: StorybookConfig['webpackFinal'] = async ( babelOptions, debug, }, - exclude: /node_modules/, + exclude: /(\.stories\.(js|jsx|ts|tsx))|(node_modules)/, }, ], }, From 2c5d2b0dc75c3cc8ffa5e181131fa8c8c7515555 Mon Sep 17 00:00:00 2001 From: Valentin Palkovic Date: Thu, 30 Nov 2023 13:29:42 +0100 Subject: [PATCH 3/4] Fix tests --- .../react-webpack/src/framework-preset-react-docs.test.ts | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/code/presets/react-webpack/src/framework-preset-react-docs.test.ts b/code/presets/react-webpack/src/framework-preset-react-docs.test.ts index bfdcd7851e07..76212f74329a 100644 --- a/code/presets/react-webpack/src/framework-preset-react-docs.test.ts +++ b/code/presets/react-webpack/src/framework-preset-react-docs.test.ts @@ -43,9 +43,9 @@ describe('framework-preset-react-docgen', () => { module: { rules: [ { - exclude: /node_modules/, + exclude: /(\.stories\.(js|jsx|ts|tsx))|(node_modules)/, loader: '@storybook/preset-react-webpack/dist/loaders/react-docgen-loader', - options: { babelOptions: { plugins: [], presets: [] } }, + options: { babelOptions: { plugins: [], presets: [] }, debug: false }, test: /\.(cjs|mjs|tsx?|jsx?)$/, }, ], @@ -88,9 +88,9 @@ describe('framework-preset-react-docgen', () => { module: { rules: [ { - exclude: /node_modules/, + exclude: /(\.stories\.(js|jsx|ts|tsx))|(node_modules)/, loader: '@storybook/preset-react-webpack/dist/loaders/react-docgen-loader', - options: { babelOptions: { plugins: [], presets: [] } }, + options: { babelOptions: { plugins: [], presets: [] }, debug: false }, test: /\.(cjs|mjs|jsx?)$/, }, ], From b9e9a41d0d23886c8a3769e78a1a8d72cdfaca48 Mon Sep 17 00:00:00 2001 From: Valentin Palkovic Date: Thu, 30 Nov 2023 14:08:10 +0100 Subject: [PATCH 4/4] Add 'story' to exclude regex of webpack-react-docgen-loader --- .../react-webpack/src/framework-preset-react-docs.test.ts | 4 ++-- code/presets/react-webpack/src/framework-preset-react-docs.ts | 4 ++-- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/code/presets/react-webpack/src/framework-preset-react-docs.test.ts b/code/presets/react-webpack/src/framework-preset-react-docs.test.ts index 76212f74329a..b773481c76ac 100644 --- a/code/presets/react-webpack/src/framework-preset-react-docs.test.ts +++ b/code/presets/react-webpack/src/framework-preset-react-docs.test.ts @@ -43,7 +43,7 @@ describe('framework-preset-react-docgen', () => { module: { rules: [ { - exclude: /(\.stories\.(js|jsx|ts|tsx))|(node_modules)/, + exclude: /(\.(stories|story)\.(js|jsx|ts|tsx))|(node_modules)/, loader: '@storybook/preset-react-webpack/dist/loaders/react-docgen-loader', options: { babelOptions: { plugins: [], presets: [] }, debug: false }, test: /\.(cjs|mjs|tsx?|jsx?)$/, @@ -88,7 +88,7 @@ describe('framework-preset-react-docgen', () => { module: { rules: [ { - exclude: /(\.stories\.(js|jsx|ts|tsx))|(node_modules)/, + exclude: /(\.(stories|story)\.(js|jsx|ts|tsx))|(node_modules)/, loader: '@storybook/preset-react-webpack/dist/loaders/react-docgen-loader', options: { babelOptions: { plugins: [], presets: [] }, debug: false }, test: /\.(cjs|mjs|jsx?)$/, diff --git a/code/presets/react-webpack/src/framework-preset-react-docs.ts b/code/presets/react-webpack/src/framework-preset-react-docs.ts index 007fa5598ee7..ae26133dc838 100644 --- a/code/presets/react-webpack/src/framework-preset-react-docs.ts +++ b/code/presets/react-webpack/src/framework-preset-react-docs.ts @@ -37,7 +37,7 @@ export const webpackFinal: StorybookConfig['webpackFinal'] = async ( babelOptions, debug, }, - exclude: /(\.stories\.(js|jsx|ts|tsx))|(node_modules)/, + exclude: /(\.(stories|story)\.(js|jsx|ts|tsx))|(node_modules)/, }, ], }, @@ -64,7 +64,7 @@ export const webpackFinal: StorybookConfig['webpackFinal'] = async ( babelOptions, debug, }, - exclude: /(\.stories\.(js|jsx|ts|tsx))|(node_modules)/, + exclude: /(\.(stories|story)\.(js|jsx|ts|tsx))|(node_modules)/, }, ], },