formatReactElementNode: convert displayName to String #515

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

Jump to bottom

Open

ckknight wants to merge 1 commit into algolia:master

from ckknight:patch-1

Open

formatReactElementNode: convert displayName to String #515

ckknight wants to merge 1 commit into algolia:master from ckknight:patch-1

Conversation

ckknight

Copy link

@ckknight ckknight commented Jan 20, 2020

If the displayName for a component turns out to be a symbol for some reason, ECMAScript will fail early when trying to implicitly convert it to a string. This explicitly converts to a string so that at least execution isn't halted.

@ckknight


 formatReactElementNode: convert displayName to String

9c03c3e

If the `displayName` for a component turns out to be a `symbol` for some reason, ECMAScript will fail early when trying to implicitly convert it to a string. This explicitly converts to a string so that at least execution isn't halted.

@armandabric armandabric self-assigned this

Jan 21, 2020

@armandabric

Copy link

Collaborator

armandabric commented Jan 23, 2020

Hi @ckknight,

Thanks for reporting this. I'm curious to understand in witch case the component displayName could be a symbol? Did you have an example?

@armandabric

Copy link

Collaborator

armandabric commented Jan 23, 2020 •

edited

Loading

I just see your PR https://github.com/storybookjs/storybook/issues/9568

I can reproduce the issue with a test:

 it('reactElementToJSXString(<Suspense fallback={() => "Loading..."}>Hello world</Suspense></script>)', () => {
 expect(
 reactElementToJSXString(
 <Suspense fallback={() => 'Loading...'}>Hello world</Suspense>
 )
 ).toEqual(
 `<Suspense fallback={() => 'Loading...'}>Hello world</Suspense>` // I'm not sure we could have exactly this output
 );
 });
/*
 TypeError: Cannot convert a Symbol value to a string
 at String.concat (<anonymous>)

 120 | } = options;
 121 |
 > 122 | let out = `<${displayName}`;
 | ^
 123 |
 124 | let outInlineAttr = out;
 125 | let outMultilineAttr = out;

 at _default (src/formatter/formatReactElementNode.js:122:10)
 at _default (src/formatter/formatTreeNode.js:50:12)
 at _default (src/formatter/formatTree.js:8:3)
 at reactElementToJsxString (src/index.js:40:10)
 at Object.<anonymous> (src/index.spec.js:221:7)
*/