Getting an error in run dev

[mikemcalister]

Hi there,

Great course! I’m really enjoying digging into Gutenberg a bit. I’ve got everything working, but I’m getting a few errors when I run dev. Both issues have to do with the …props seen below. Any thoughts what might be going on here? Thanks in advance!

ERROR in ./blocks/examples/08-input/index.js
Module build failed: SyntaxError: Unexpected token (44:38)

  42 |                 id="example-input-field"
  43 |                 labelText="Custom Input Field"
> 44 |                 { ...{ onChangeInput, ...props } }

ERROR in ./blocks/examples/07-inspector-controls-colors/index.js
Module build failed: SyntaxError: Unexpected token (62:72)

  60 |                          !! props.focus && (
  61 |           <Inspector
> 62 |             { ...{ toggleHighContrast, onChangeContrastBackgroundColor, ...props} }

[mikemcalister]

I was able to solve this by installing babel-preset-stage-2 and adding it to the presets in webpack.config.js.

[Zac Gordon]

That is strange you’re getting that error as the babel file included should have handled that. Did the babel file get included in your example?

It’s happening because object deconstruction is not yet a part of JS.

[Zac Gordon]

This line right here should handle that.

https://github.com/zgordon/gutenberg-course/blob/e5fa68af2eb6f5b1480e8361fde9ba18da67e12b/jsforwp-blocks/.babelrc#L11

[Author]

Posts