search

liferay / liferay-js-toolkit

GNU Lesser General Public License v3.0
52 stars 41 forks source link

Build failed when components use shorthand for React.Fragment #599

Closed andrewatliferay closed 4 years ago

andrewatliferay commented 4 years ago

I can confirm that using does allow me to leverage the fragment in the markup, but when I try to use the shorthand notation <></> in my return markup I get an error:

SyntaxError: src/components/Comments.js: Unexpected token (36:13) 34 | else 35 | return(

36 | <> | ^ 37 |

Comments

38 | { 39 | (data.items.length == 0) ? Start a conversation - be the first to comment! : ''

izaera commented 4 years ago

You should configure your .babelrc file correctly. The JS Toolkit is not responsible to transpiling your source code: it is done as a build step prior to executing liferay-npm-bundler.

andrewatliferay commented 4 years ago

Hi Ivan,

Thanks for the details -- something else to figure out hahah (I'm newish to all this). One more comment though. According to documentation I found, the React framework added this shorthand notation in 16.2. The liferay-js tools generated for me a skeleton project with 16.8 as the version so I would argue that developers might expect to be able to use it (just based on versions).

Can the necessary babelrc changes be added as part of the generated skeleton project?

izaera commented 4 years ago

Hi again. After thinking more about it, I'm unsure if the shorthand notation is a matter of tweaking the .babelrc file, as everything you are supposed to put there is the react preset and it is there by default :thinking:

As you say, fragments are available since 16.2 so I have to investigate this a bit more...

izaera commented 4 years ago

Found it. This is the reason.

You need Babel 7 for the shorthand </> notation to work and we still use Babel 6. So, the only workaround for now is to use <React.Fragment>