react-element-to-jsx-string
react-element-to-jsx-string copied to clipboard
No handling for Symbol-named JSX tags like React.StrictMode
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.