algolia / algolia/react-element-to-jsx-string
No handling for Symbol-named JSX tags like React.StrictMode
- Dominant language
- JavaScript
- Stars
- 518
- Forks
- 87
- Avg merge
- 3h 56m
- Merged PRs (30d)
- 3
Description
In React, the built-in `` 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](https://github.com/storybookjs/storybook/issues/22472)).
Even something simple like the following would more than suffice:
```ts
// ... ^^ 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.
Contributor guide
No contributing guide indexed for this repository
Research direction
Start at src/formatter/formatReactElementNode.js around line 122 and reproduce the crash with an inline React.StrictMode element. Trace how the tag name is formatted, then verify that symbol-named tags produce a JSX string without crashing, including the React.StrictMode case.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript, react
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 2/5
- Estimated time
- 1-3 hours
- Activity status
- Stale
- Clarity
- Clearly specified
- Newbie friendliness
- 55/100