ES6 Transpile error using Babel (PhpStorm)

Question

I have the following compile error within PhpStorm on my Babel file watcher:

    cmd.exe /D /C call "C:/Program Files/nodejs/babel.cmd" wp-content\plugins\scorch_gutenberg\blocks.js --out-dir dist --presets=es2015
SyntaxError: wp-content/plugins/scorch_gutenberg/blocks.js: Unexpected token (12:15)
  10 | 
  11 |     edit() {
> 12 |         return <p style={ blockStyle }>Hello editor.</p>;
     |                ^
  13 |     },
  14 | 
  15 |     save() {

Process finished with exit code 1

Essentially it looks like it is not recognising the ES6 syntax. I have installed the es2015 presets as per the Babel website and the only error I am seeing is this Synax one so not sure if I am missing something obvious as I am really a PHP dev.

Any help would be fantastic or if anyone else has the latest version of PhpStorm and has setup a transpiler for this purpose.

Answer 1

it's not recognizing JSX syntax (return <p style={ blockStyle }>Hello editor.</p> is JSX). You need installing babel-preset-react and adding it to presets