Skip to content

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

Open
@CodeSmith32

Description

@CodeSmith32

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.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions