Error when using global decorators

[gunar]

craco.config.js

const CracoEsbuildPlugin = require("craco-esbuild");
const sassResourcesLoader = require("craco-sass-resources-loader");

module.exports = {
  plugins: [
    {
      plugin: CracoEsbuildPlugin,
    },
    { plugin: sassResourcesLoader,
      options: {
        resources: [
          'src/pages/FlowEditor/floweditor.scss'
        ]
      }},
  ],
};

.storybook/preview.js

import CssBaseline from "@material-ui/core/CssBaseline";
import { ThemeProvider } from "@material-ui/core/styles";
import { DndProvider } from "react-dnd";
import { HTML5Backend } from "react-dnd-html5-backend";

import theme from "../src/theme";

export const decorators = [
  (Story) => (
    <ThemeProvider theme={theme}>
      <CssBaseline />
      <DndProvider backend={HTML5Backend} key={Date.now()}>
        <Story />
      </DndProvider>
    </ThemeProvider>
  ),
];

Error log

ERROR in ./.storybook/preview.js 13:4
Module parse failed: Unexpected token (13:4)
File was processed with these loaders:
 * ./node_modules/.pnpm/@pmmmwh/react-refresh-webpack-plugin@0.4.2_d00fcc46a48175a4e289da7534b00e9a/node_modules/@pmmmwh/react-refresh-webpack-plugin/loader/index.js
You may need an additional loader to handle the result of these loaders.
| export const decorators = [
|   (Story) => (
>     <ThemeProvider theme={theme}>
|       <CssBaseline />
|       <DndProvider backend={HTML5Backend} key={Date.now()}>
 @ ./.storybook/preview.js-generated-config-entry.js 10:22-95
 @ multi ./node_modules/.pnpm/@pmmmwh/react-refresh-webpack-plugin@0.4.2_d00fcc46a48175a4e289da7534b00e9a/node_modules/@pmmmwh/react-refresh-webpack-plugin/client/ReactRefreshEntry.js ./node_modules/.pnpm/@storybook/core@6.1.17_b10dc8a65b4d2edc722e4a3e348b4892/node_modules/@storybook/core/dist/server/common/polyfills.js ./node_modules/.pnpm/@storybook/core@6.1.17_b10dc8a65b4d2edc722e4a3e348b4892/node_modules/@storybook/core/dist/server/preview/globals.js ./.storybook/storybook-init-framework-entry.js ./.storybook/preview.js-generated-config-entry.js ./.storybook/generated-stories-entry.js ./node_modules/.pnpm/webpack-hot-middleware@2.25.0/node_modules/webpack-hot-middleware/client.js?reload=true&quiet=false&noInfo=undefined ./node_modules/.pnpm/react-dev-utils@11.0.1/node_modules/react-dev-utils/webpackHotDevClient.js

 1:node*   2:nvim-                                                                           06/02  15:36:23

[danielknell]

I have no idea what might be causing this, my general approach to webpack is to try and pretend it doesn't exist and maybe it will go away... I feel someone who actually understands things better might have to weigh in and help.

does this work with the standard create-react-app preset?

[starlabs007]

This is because you're using JSX syntax in a .js file. The default babel config in CRA doesn't transpile .js files (it transpiles jsx into js). You can see the error is at the exact line you're using jsx syntax: <ThemeProvider .../>.

You can try renaming preview.js to preview.jsx (or preview.tsx and then fix type errors if you're using TypeScript).