[addon-knob] magic characters block the knob rendering

Describe the bug

The following story gives a in correct knobs:

To Reproduce

Stept to reproduce:

1. Add the following fake story:

import React from 'react';
import { storiesOf } from '@storybook/react';
import { boolean as bool, text } from '@storybook/addon-knobs';

const X = () => <div>X</div>;

storiesOf('X', module).add('X', () => {
  return (
    <X
      name="checkbox"
      meta={{
        submitting: bool('meta.submitting', false),
        pristine: bool('meta.pristine', true),
        error: text('meta.error', ''),
      }}
    />
  );
});

1. see no meta.pristine, meta.error appears; however no errors get printed. 👀

Note: <comething> is potentially be magical, and in some setup it won’t be magical (i.e. working as expected…)

Expected behavior It should show 3 knobs.

Screenshots N/A

Code snippets N/A

System:

• OS: MacOS
• Device: Macbook Air 2013
• Browser: ALL
• Framework: React
• Addons: Addon-knobs
• Version: at least since v5.0.2

Additional context related: #6243. reproduced by: @Armanio (see here)

[leoyli]

@maximeg, oh thank you to bring this up!

@shilman, I think we need to change the setting on the stale bot do not close the bug tag…

@ndelangen, I was looking a bit but get lost… It seems the root cause is not this addon but the internal lib. I believe the root cause is how storybook serialize the message exchanged via the channel… any idea?!

[maximeg]

Hi @leoyli, the stale bot closed it, but this is still an issue as of @storybook/addon-knobs version 5.1.10:

  const name = text("(props) entry.account.name", "John Doe");
  const screenName = text("(props) entry.account.screenName", "johndoe");
  const title = text("(props) entry.item.title", "The title");

Without the dots, that’s fine.