Change how are props render in methods using custom *Renderer component

[struers-mfr]

Hello guys,
I'm struggling with custom React *Renderer overwriting default components. I want render each argument prop from method on separate line and description in description column.

I was trying to start from this hint in cookbook section that define different layout How to change the layout of a style guide? but stuck on the compiler error. This error seems like there is no support of jsx compilation of React component, I try copy all dependencies from React-styleguidist but with no luck, always get this same error

Failed to compile.
./styleguide/StyleGuideRenderer.js
Syntax error: Unexpected token (9:2)

   7 |   hasSidebar,
   8 | }) => (
>  9 |   <div className="root">
     |   ^
  10 |     <h1>{title}</h1>
  11 |     <main className="wrapper">
  12 |       <div className="content">

What I am doing wrong?

[rafaesc]

Hello @struers-mfr,

you have to add the babel loader on the webpack config to support jsx, here
https://github.com/vue-styleguidist/vue-styleguidist/blob/master/docs/Webpack.md#custom-webpack-config

{
  test: /\.js?$/,
  exclude: /node_modules/,
  loader: 'babel-loader'
}

And add .babelrc in your project

{
  "presets": [
    "env",
    "react"
  ],
  "plugins": [
    "transform-class-properties"
  ]
}