Storybook: Object spread syntax error

[agarrharr]

When I use an object spread, I get a syntax error. Does storybook support this syntax?

[danielduan]

We are using babel-preset-env by default so yes we do support the object spread syntax. If you are using a custom babel or webpack config, it might be overridden.

[agarrharr]

Thanks for the quick response. The only thing I have in my .storybook directory is addons.js and config.js, so I'm not using a custom babel or webpack config.

[Hypnosphi]

Actually, it‘s not part of preset-env, because it‘s not yet a snandard. But we use preset-stage-0 as well, so it should be available anyway.

Is there a chance that you have .babelrc in your project root directory?

[agarrharr]

I do. I added "stage-1" to my .babelrc and it worked! Thanks.

[clive107]

I do have "stage-1" in my .babelrc but still not working.. Any idea? :)

{
  "ignore": [],
  "env": {
    "test": {
      "presets": ["es2015", "stage-1", "vue"],
      "plugins": ["transform-runtime"]
    }
  }
}

[Hypnosphi]

@clive107 what's the error in your case?

[clive107]

@Hypnosphi I am having the following error:
in ./stories/SearchResult.js
Module build failed: SyntaxError: Unexpected token (11:18)

.addDecorator(VueInfoAddon)
.add('result', () => {
     const item = {...searchResults[0], isXXX: false}

     return {

The syntax error is at the three dots there.

I am able to use this syntax in my normal Vue files, but not in the Storybook files.
In my ./storybook, there is a config.js & webpack.config.js.

[Hypnosphi]

Weird. Can you please create a GitHub repo with minimal reproduction of your issue?

[clive107]

@Hypnosphi
Managed to solved it finally. Added a .babelrc into my ./storybook.
Previously I duplicated the .babelrc above and added into ./storybook but it was not working, and after removed the "ignore": [], it is working now.
Thanks a lot :)

[pskorupinski]

I had the same issue and it started working when I added babel.rc file with exactly this content:

{ "presets": ["env", "react", "stage-0"] }

[jacksbox]

Similar problem for me: I tried to add a babel plugin via .babelrc:

{
  "plugins": ["wildcard"]
}

But this broke the config.js file

ERROR in ./.storybook/config.js
Module build failed: SyntaxError: Unexpected token (40:2)

  38 | addDecorator(withIntl)
  39 | addDecorator(story => (
> 40 |   <div style={{padding: "1px", position: "relative"}}>
     |   ^
  41 |     <div id="storybook-element">
  42 |       {story()}
  43 |     </div>

After adding "presets": ["env", "react", "stage-0"] to the .babelrc file, it works (thanks to @pskorupinski) - but why?

[Hypnosphi]

Because you need React plugin to transpile JSX