[Bug]: react-docgen fails on match(regex) inside promise.

[MarkLyck]

Describe the bug

After upgrading to storybook 8.0.4, building the storybook fails with the following error:

x Build failed in 4.04s
=> Failed to build the preview
TypeError: [storybook:react-docgen-plugin] Attempted to resolveName for an unsupported path. resolveName does not accept ObjectMethod".
file: ./src/components/PortalBuilder/Elements/Inputs/PhoneNumberInput/index.tsx
    at resolveName (./node_modules/react-docgen/dist/utils/getMemberExpressionValuePath.js:72:9)
    at getMemberExpressionValuePath (./node_modules/react-docgen/dist/utils/getMemberExpressionValuePath.js:91:21)
    at getMemberValuePath (./node_modules/react-docgen/dist/utils/getMemberValuePath.js:95:62)
    at resolveToValue (./node_modules/react-docgen/dist/utils/resolveToValue.js:139:66)
    at isReactBuiltinReference (./node_modules/react-docgen/dist/utils/isReactBuiltinReference.js:61:51)
    at isReactBuiltinCall (./node_modules/react-docgen/dist/utils/isReactBuiltinCall.js:41:53)
    at Object.enter (./node_modules/react-docgen/dist/handlers/componentMethodsHandler.js:74:48)
    at NodePath._call (./node_modules/@babel/traverse/lib/path/context.js:46:20)
    at NodePath.call (./node_modules/@babel/traverse/lib/path/context.js:36:17)
    at NodePath.visit (./node_modules/@babel/traverse/lib/path/context.js:82:31)
    at TraversalContext.visitQueue (./node_modules/@babel/traverse/lib/context.js:86:16)
    at TraversalContext.visitSingle (./node_modules/@babel/traverse/lib/context.js:65:19)
    at TraversalContext.visit (./node_modules/@babel/traverse/lib/context.js:109:19)
    at traverseNode (./node_modules/@babel/traverse/lib/traverse-node.js:22:17)
    at NodePath.visit (./node_modules/@babel/traverse/lib/path/context.js:88:52)
    at TraversalContext.visitQueue (./node_modules/@babel/traverse/lib/context.js:86:16)
    at TraversalContext.visitMultiple (./node_modules/@babel/traverse/lib/context.js:61:17)
    at TraversalContext.visit (./node_modules/@babel/traverse/lib/context.js:107:19)
    at traverseNode (./node_modules/@babel/traverse/lib/traverse-node.js:22:17)
    at NodePath.visit (./node_modules/@babel/traverse/lib/path/context.js:88:52)
    at TraversalContext.visitQueue (./node_modules/@babel/traverse/lib/context.js:86:16)
    at TraversalContext.visitMultiple (./node_modules/@babel/traverse/lib/context.js:61:17)
    at TraversalContext.visit (./node_modules/@babel/traverse/lib/context.js:107:19)
    at traverseNode (./node_modules/@babel/traverse/lib/traverse-node.js:22:17)
    at NodePath.visit (./node_modules/@babel/traverse/lib/path/context.js:88:52)
    at TraversalContext.visitQueue (./node_modules/@babel/traverse/lib/context.js:86:16)
    at TraversalContext.visitSingle (./node_modules/@babel/traverse/lib/context.js:65:19)
    at TraversalContext.visit (./node_modules/@babel/traverse/lib/context.js:109:19)
    at traverseNode (./node_modules/@babel/traverse/lib/traverse-node.js:22:17)
    at NodePath.visit (./node_modules/@babel/traverse/lib/path/context.js:88:52)
    at TraversalContext.visitQueue (./node_modules/@babel/traverse/lib/context.js:86:16)
    at TraversalContext.visitMultiple (./node_modules/@babel/traverse/lib/context.js:61:17)
    at TraversalContext.visit (./node_modules/@babel/traverse/lib/context.js:107:19)
    at traverseNode (./node_modules/@babel/traverse/lib/traverse-node.js:22:17)
    at NodePath.visit (./node_modules/@babel/traverse/lib/path/context.js:88:52)
    at TraversalContext.visitQueue (./node_modules/@babel/traverse/lib/context.js:86:16)
    at TraversalContext.visitSingle (./node_modules/@babel/traverse/lib/context.js:65:19)
    at TraversalContext.visit (./node_modules/@babel/traverse/lib/context.js:109:19)
    at traverseNode (./node_modules/@babel/traverse/lib/traverse-node.js:22:17)
    at NodePath.visit (./node_modules/@babel/traverse/lib/path/context.js:88:52)
    at TraversalContext.visitQueue (./node_modules/@babel/traverse/lib/context.js:86:16)
    at TraversalContext.visitMultiple (./node_modules/@babel/traverse/lib/context.js:61:17)
    at TraversalContext.visit (./node_modules/@babel/traverse/lib/context.js:107:19)
    at traverseNode (./node_modules/@babel/traverse/lib/traverse-node.js:22:17)
    at NodePath.visit (./node_modules/@babel/traverse/lib/path/context.js:88:52)
    at TraversalContext.visitQueue (./node_modules/@babel/traverse/lib/context.js:86:16)
    at TraversalContext.visitSingle (./node_modules/@babel/traverse/lib/context.js:65:19)
    at TraversalContext.visit (./node_modules/@babel/traverse/lib/context.js:109:19)
    at traverseNode (./node_modules/@babel/traverse/lib/traverse-node.js:22:17)
    at NodePath.visit (./node_modules/@babel/traverse/lib/path/context.js:88:52)

The bug occurs when using regex with the following lines of code:

const phoneNumberRegex =
  /^[\+]?[(]?[0-9]{3}[)]?[-\s\.]?[0-9]{3}[-\s\.]?[0-9]{4,6}$/im;

value.match(phoneNumberRegex)

Removing the line value.match(phoneNumberRegex) from my code makes the error go away. But of course I do want to be able to validate a phone number regex in my form.

This worked fine in [email protected]

To Reproduce

https://stackblitz.com/edit/github-xschwr?file=src%2Fstories%2FPhoneNumberInput.tsx

Try to run the PhoneNumberInput story, or run build-storybook to see error.

I could not reproduce it running the match function by itself outside of antd validator. But given that this works fine in the actual webapp, and it was working fine in storybook 7, it seems to be a storybook bug and not an issue with antd.

System

Storybook Environment Info:

  System:
    OS: macOS 14.4.1
    CPU: (10) arm64 Apple M1 Max
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 20.11.1 - /usr/local/bin/node
    Yarn: 1.22.17 - /usr/local/bin/yarn
    npm: 10.2.4 - /usr/local/bin/npm <----- active
    pnpm: 8.7.0 - ~/Library/pnpm/pnpm
  Browsers:
    Chrome: 123.0.6312.59
    Safari: 17.4.1
  npmPackages:
    @storybook/addon-actions: 8.0.4 => 8.0.4
    @storybook/addon-essentials: 8.0.4 => 8.0.4
    @storybook/addon-links: 8.0.4 => 8.0.4
    @storybook/addon-styling: 1.3.7 => 1.3.7
    @storybook/client-logger: 8.0.4 => 8.0.4
    @storybook/react: 8.0.4 => 8.0.4
    @storybook/react-vite: 8.0.4 => 8.0.4
    chromatic: 11.2.0 => 11.2.0
    msw-storybook-addon: 1.10.0 => 1.10.0
    storybook: 8.0.4 => 8.0.4

Additional context

No response

[valentinpalkovic]

Hi @MarkLyck

Have you used react-docgen also in Storybook 7.0 for component analysis? Please be aware that we have changed the default component analysis tool from react-docgen-typescript to react-docgen. In some reported cases, react-docgen doesn't always work out of the box. In this case, we are recommending switching back to react-docgen-typescript instead. You can find more information in the migration guide: https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#react-docgen-component-analysis-by-default

In Storybook 7, we used react-docgen-typescript to analyze React component props and auto-generate controls. In Storybook 8, we have moved to react-docgen as the new default. react-docgen is dramatically more efficient, shaving seconds off of dev startup times. However, it only analyzes basic TypeScript constructs.

We feel react-docgen is the right tradeoff for most React projects. However, if you need the full fidelity of react-docgen-typescript, you can opt-in using the following setting in .storybook/main.js:

export default {
  typescript: {
    reactDocgen: "react-docgen-typescript",
  },
};

For more information see: https://storybook.js.org/docs/react/api/main-config-typescript#reactdocgen

[MarkLyck]

@valentinpalkovic Thank you! I can confirm reverting to the old "react-docgen-typescript" resolved the issue for me and I got it working on storybook 8.0.4.

I was hoping to take advantage of the new react-docgen and it's performance improvements, are there any plans to continue work on that to make it compatible with regex matching inside promises in the future?

[valentinpalkovic]

I think you have already found the corresponding issue in the react-docgen repo: reactjs/react-docgen#902

Let's hope this gets fixed soon! Since this isn't a particular Storybook issue, I would suggest closing this issue.