how to add theme-ui to storybook project

[Mohamedsobhy292]

I work with a project using theme-ui library
which make use of the jsx paragma
so in the beginning of every file I have

/** @jsx jsx */
import { jsx } from '@theme-ui/core';
I want to add storybook 6 to my project, when I add storybook I always get an error of pragma and pragmaFrag cannot be set when runtime is automatic.

I tried to override the babel config on .storbook/main.js but no luck using this code

babel: async (options) => ({
    ...options,
    presets: [
      ...options.presets,
      [
        "@babel/preset-react",
        {
          runtime: "classic"
        }
      ]
    ]
  })

[hasparus]

You can use automatic JSX runtime with Theme UI. Configure jsxImportSource (both in your project, and Storybook). I'm not quite sure right now, but Storybook 6 should also accept a babelrc in either .storybook or the root dir.

[Mohamedsobhy292]

it's not accepting it and when I add the importSource to it it stuck at the build time at 69%