I have a React project where I want to start using Storybook. The initial basic configuration works correctly, even using JSX in the stories, but when I try to add a global decorator using JSX I get the following syntax error:
// .storybook/preview.js
import React from 'react';
export const decorators = [
(Story) => (
<div style={{ margin: '3em' }}>
<Story />
</div>
),
];
ERROR in ./.storybook/preview.jsx
Module build failed (from ./node_modules/babel-loader/lib/index.js):
SyntaxError: /home/user/Documents/react-test/.storybook/preview.jsx: Unexpected token, expected "," (5:11)
3 | export const decorators = [
4 | (Story) => (
> 5 | <div style={{ margin: '3em' }}>
| ^
6 | <Story />
7 | </div>
8 | ),
at Object._raise (/home/user/Documents/react-test/node_modules/@babel/core/node_modules/@babel/parser/lib/index.js:776:17)
at Object.raiseWithData (/home/user/Documents/react-test/node_modules/@babel/core/node_modules/@babel/parser/lib/index.js:769:17)
at Object.raise (/home/user/Documents/react-test/node_modules/@babel/core/node_modules/@babel/parser/lib/index.js:737:17)
at Object.unexpected (/home/user/Documents/react-test/node_modules/@babel/core/node_modules/@babel/parser/lib/index.js:9735:16)
at Object.expect (/home/user/Documents/react-test/node_modules/@babel/core/node_modules/@babel/parser/lib/index.js:9721:28)
at Object.tsParseDelimitedListWorker (/home/user/Documents/react-test/node_modules/@babel/core/node_modules/@babel/parser/lib/index.js:5557:14)
at Object.tsParseDelimitedList (/home/user/Documents/react-test/node_modules/@babel/core/node_modules/@babel/parser/lib/index.js:5529:25)
at Object.tsParseBracketedList (/home/user/Documents/react-test/node_modules/@babel/core/node_modules/@babel/parser/lib/index.js:5575:25)
at Object.tsParseTypeParameters (/home/user/Documents/react-test/node_modules/@babel/core/node_modules/@babel/parser/lib/index.js:5684:24)
at /home/user/Documents/react-test/node_modules/@babel/core/node_modules/@babel/parser/lib/index.js:7391:29
at Object.tryParse (/home/user/Documents/react-test/node_modules/@babel/core/node_modules/@babel/parser/lib/index.js:9762:20)
at Object.parseMaybeAssign (/home/user/Documents/react-test/node_modules/@babel/core/node_modules/@babel/parser/lib/index.js:7388:24)
at /home/user/Documents/react-test/node_modules/@babel/core/node_modules/@babel/parser/lib/index.js:10427:39
at Object.allowInAnd (/home/user/Documents/react-test/node_modules/@babel/core/node_modules/@babel/parser/lib/index.js:12104:12)
at Object.parseMaybeAssignAllowIn (/home/user/Documents/react-test/node_modules/@babel/core/node_modules/@babel/parser/lib/index.js:10427:17)
at Object.parseParenAndDistinguishExpression (/home/user/Documents/react-test/node_modules/@babel/core/node_modules/@babel/parser/lib/index.js:11308:28)
@ ./.storybook/preview.jsx-generated-config-entry.js 9:37-128
@ multi ./node_modules/@storybook/core-client/dist/esm/globals/polyfills.js ./node_modules/@storybook/core-client/dist/esm/globals/globals.js ./.storybook/storybook-init-framework-entry.js ./node_modules/@storybook/addon-docs/dist/esm/frameworks/common/config.js-generated-other-entry.js ./node_modules/@storybook/addon-docs/dist/esm/frameworks/react/config.js-generated-other-entry.js ./node_modules/storybook-addon-gatsby/dist/preview.mjs-generated-other-entry.js ./node_modules/@storybook/addon-links/dist/esm/preset/addDecorator.js-generated-other-entry.js ./node_modules/@storybook/addon-actions/dist/esm/preset/addDecorator.js-generated-other-entry.js ./node_modules/@storybook/addon-actions/dist/esm/preset/addArgs.js-generated-other-entry.js ./node_modules/@storybook/addon-backgrounds/dist/esm/preset/addDecorator.js-generated-other-entry.js ./node_modules/@storybook/addon-backgrounds/dist/esm/preset/addParameter.js-generated-other-entry.js ./node_modules/@storybook/addon-measure/dist/esm/preset/preview.js-generated-other-entry.js ./node_modules/storybook-addon-outline/dist/esm/preset/addDecorator.js-generated-other-entry.js ./.storybook/preview.jsx-generated-config-entry.js ./.storybook/generated-stories-entry.js (webpack)-hot-middleware/client.js?reload=true&quiet=false&noInfo=undefined
What is missing here? I would be happy to provide more config files if needed.