Webpack loader issue with Storybook 6 global decorator

Hi, I tried to use this project with its JS Storybook 6 implementation, but I immediately faced an issue when extending the preview.js configuration.

When creating a global decorator, the console throws this error:

ERROR in ./.storybook/preview.js 3:4
Module parse failed: Unexpected token (3:4)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| const mainDecorators = (Story) => {
|   return (
>     <main id="test">
|       <Story />
|     </main>

This is my preview.js, following Storybook's docs

const mainDecorators = (Story) => (
  <main id="test">
    <Story />
  </main>
);

export const decorators = [mainDecorators];

export const parameters = {
  actions: { argTypesRegex: '^on[A-Z].*' },
};

This is the only thing preventing me from using this perfect setup, hoping to get help soon

I will create a draft PR for reproduction. Thanks

react-workspaces / react-workspaces-playground

Webpack loader issue with Storybook 6 global decorator #74