Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
CodeSmith32 opened this issue Nov 9, 2023 · 0 comments
Open

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

CodeSmith32 opened this issue Nov 9, 2023 · 0 comments

Comments

@CodeSmith32
Copy link

CodeSmith32 commented Nov 9, 2023

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant