React-styleguidist: TypeError: string.replace is not a function

[hongyin163]

webpack:///./node_modules/react-styleguidist/lib/client/rsg-components/Props/util.js?

/**
 * Remove quotes around given string.
 *
 * @param {string} string
 * @returns {string}
 */
function unquote(string) {
  return string && string.replace(/^['"]|['"]$/g, '');
}

the parameter “string“ may be true value

[hongyin163]

I find the problem ：
I use react-docgen-typescript as propsParser ,but this package is updated，so the string parameter is not a string type

https://github.com/styleguidist/react-docgen-typescript/pull/210

[Wiklem]

Hi.
Il get the same trying to view ms-fabric component props:

TypeError: string.replace is not a function
    in TableRenderer (created by Styled(Table))
    in Styled(Table) (created by PropsRenderer)
    in PropsRenderer (created by Usage)
    in div (created by Usage)
    in Usage (created by Slot)
    in div (created by Slot)
    in Slot (created by ReactComponent)
    in div (created by ReactComponentRenderer)
    in div (created by ReactComponentRenderer)
    in div (created by ReactComponentRenderer)
    in ReactComponentRenderer (created by Styled(ReactComponent))
    in Styled(ReactComponent) (created by ReactComponent)
    in ReactComponent (at Sections.tsx:38)
    in Route (at Sections.tsx:56)
    in Switch (at Sections.tsx:55)
    in Sections (at StyleGuide.tsx:86)
    in Suspense (at StyleGuide.tsx:80)
    in div (at Typography.tsx:33)
    in Typography (at StyleGuideRenderer.tsx:107)
    in article (at StyleGuideRenderer.tsx:106)
    in div (created by GridCol)
    in GridCol (at StyleGuideRenderer.tsx:105)
    in div (created by GridRow)
    in GridRow (at StyleGuideRenderer.tsx:87)
    in div (created by Grid)
    in Grid (at StyleGuideRenderer.tsx:86)
    in div (at StyleGuideRenderer.tsx:85)
    in div (at StyleGuideRenderer.tsx:53)
    in div (at StyleGuideRenderer.tsx:52)
    in ScrollToTop (created by Context.Consumer)
    in withRouter(ScrollToTop) (at StyleGuideRenderer.tsx:51)
    in StyleGuideRenderer (at StyleGuide.tsx:70)
    in Router (at StyleGuide.tsx:69)
    in div (created by FabricBase)

TypeError: string.replace is not a function
./node_modules/react-styleguidist/lib/client/rsg-components/Props/util.js:12

[malcolm-kee]

For anyone hitting this issue because using react-docgen-typescript, the workaround is to change the following code in your styleguide.config.js:

module.exports = {
  ...
  propsParser: require('react-docgen-typescript').withDefaultConfig({
    savePropValueAsString: true,
  }).parse,
  ...
};

But I guess the proper fix is to fix the unquote utility.

[Wiklem]

    savePropValueAsString: true,

Thank you for the workaround.

Yeah, should be a check in export function unquote(string) { if (typeof string === 'string') return string && string.replace(/^['"]|['"]$/g, ''); , since a boolean will crash it.