[4.2.0] Spread operator error no 'Object.assign'

[rcline]

When upgrading from v4.1.0 to v4.2.0 I am getting this error:

CompileError: Mixed JSX attributes ending in spread requires specified objectAssign option with 'Object.assign' or polyfill helper. (10:2)
6  :   }
7  : };
8  : 
9  : <div>
10 :   <Button {...props} displaySize="large">Large Primary</Button>
       ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^

In my Readme.md component example I am setting up a variable and then using the spread operator like so:

const props = {
  kind: 'default',
  onClick: () => console.log('Button clicked'),
  style: {
    marginRight: '10px'
  }
};

<div>
  <Button {...props} displaySize="large">Large Default</Button>
  <Button {...props} displaySize="medium">Medium Default</Button>
  <Button {...props} displaySize="small">Small Default</Button>
</div>

This separates out the styling used just for the style guide and common props for ease of use and editing inside the running styleguide app.

I looked through commit history between the two version, the only thing standing out is the switch between babel-standalone and buble. I will look into buble some more, but do I need to include my own Object.assign polyfill now?

Much thanks, love this library!!!

[sapegin]

I’m almost sure that’s because of the switch to Buble. If you have time to find how to do that and send a pull request (if it can be done in Styleguidist itself) that would be awesome ;-)

[nkt]

@sapegin please add flag which would replace buble by babel.
In my project I got following error:

Error when parsing src/components/AuthForm/AuthForm.js
Error: [{type: ImportSpecifier, start: 270, end: 282, loc: [object Object], imported: [object Object], local: [object Object], id: null, name: null}, {type: ImportSpecifier, start: 284, end: 294, loc: [object Object], imported: [object Object], local: [object Object], id: null, name: null}, {type: ImportSpecifier, start: 298, end: 312, loc: [object Object], imported: [object Object], local: [object Object], id: null, name: null}, {type: ImportSpecifier, start: 314, end: 323, loc: [object Object], imported: [object Object], local: [object Object], id: null, name: null}, {type: ImportSpecifier, start: 327, end: 341, loc: [object Object], imported: [object Object], local: [object Object], id: null, name: null}, {type: ImportSpecifier, start: 343, end: 352, loc: [object Object], imported: [object Object], local: [object Object], id: null, name: null}, {type: ImportSpecifier, start: 356, end: 369, loc: [object Object], imported: [object Object], local: [object Object], id: null, name: null}] does not match type Printable

[sapegin]

@nkt Could you please share your example source? I don’t think there’s a real need for extra complexity.

[nkt]

@sapegin

git clone https://github.com/dialogs/dialog-web-components.git
git checkout v0.54.3
yarn install
styleguidist build

[sapegin]

@nkt Awesome styleguide!! ❤️

This error is from react-docgen. We use Buble only for client-side rendering of examples in Markdown, not for your components code.