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..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,9 +43,9 @@ describe('framework-preset-react-docgen', () => { module: { rules: [ { - exclude: /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: [] } }, + 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|story)\.(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?)$/, }, ], 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..ae26133dc838 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,8 +35,9 @@ export const webpackFinal: StorybookConfig['webpackFinal'] = async ( ), options: { babelOptions, + debug, }, - exclude: /node_modules/, + exclude: /(\.(stories|story)\.(js|jsx|ts|tsx))|(node_modules)/, }, ], }, @@ -60,8 +62,9 @@ export const webpackFinal: StorybookConfig['webpackFinal'] = async ( ), options: { babelOptions, + debug, }, - exclude: /node_modules/, + exclude: /(\.(stories|story)\.(js|jsx|ts|tsx))|(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); } } }