algolia / react-element-to-jsx-string

Turn a ReactElement into the corresponding JSX string
MIT License
490 stars 80 forks source link

No handling for Symbol-named JSX tags like React.StrictMode #827

Open CodeSmith32 opened 10 months ago

CodeSmith32 commented 10 months ago

In React, the built-in <React.StrictMode> tag is a symbol. Trying to generate JSX for any tags with Symbol-names crashes at the following line because there's no handling for symbols:

https://github.com/algolia/react-element-to-jsx-string/blob/master/src/formatter/formatReactElementNode.js#L122

Please add proper handling so Storybook works with inline StrictMode (since apparently it's broken otherwise).

Even something simple like the following would more than suffice:

  // ...  ^^ also make displayName not a const

  const {
    filterProps,
    maxInlineAttributesLineLength,
    showDefaultProps,
    sortProps,
    tabStop,
  } = options;

  /////////////////////
  if(typeof displayName === "symbol") {
    displayName = displayName === Symbol.for('react.strict_mode')
        ? "React.StrictMode" : String(displayName)
  }
  /////////////////////

  let out = `<${displayName}`;

  let outInlineAttr = out;
  let outMultilineAttr = out;
  let containsMultilineAttr = false;

  // ...

Sorry, I may eventually have time to make a PR, but if not, hopefully I've sufficiently identified the problem and the solution.