can not use jsx in decorators in preview.js

in react-boilerplate with storybook when try to add this decorator

export const decorators = [
  (Story) => (
    <div>
      <Story />
    </div>
  )
];

it shows this error:

ERROR in ./.storybook/preview.js
Module build failed (from ./node_modules/@storybook/builder-webpack4/node_modules/babel-loader/lib/index.js):
SyntaxError:...\.storybook\preview.js: Unexpected token, expected "</>/<=/>=" (21:13)

  19 |   (Story) => (
  20 |     <div>
> 21 |       <Story />
     |              ^
  22 |     </div>
  23 |   )
  24 | ];

[Dreamufor]

Hi, I encounter the same issue, and I used React.createElement to solve the problem.

Before:

export const decorators = [
  (Story) => (
    <ThemeProvider theme="default">
      <Story />
    </ThemeProvider>
  ),
];

Solutions:

export const decorators = [
  (Story) => {
    return React.createElement(ThemeProvider, {
      children: React.createElement(Story),
    });
  },
];

Hope this helps! @farshidinanloo

[vanyadymousky]

@farshidinanloo Yes, it was about renaming decorators file preview.js to preview.tsx so jsx is now parsed correctly. Looks like I’m forced to do that since I’ve updated to 6.3.8 - in a case somebody hit same issue.