Open CodeSmith32 opened 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:
<React.StrictMode>
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.
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:
Sorry, I may eventually have time to make a PR, but if not, hopefully I've sufficiently identified the problem and the solution.