react-element-to-jsx-string icon indicating copy to clipboard operation
react-element-to-jsx-string copied to clipboard

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

Open CodeSmith32 opened this issue 2 years ago • 0 comments

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.

CodeSmith32 avatar Nov 09 '23 21:11 CodeSmith32