algolia / algolia/react-element-to-jsx-string

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

Open
#827 0 comments 0 reactions 0 assignees View on GitHub
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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.