pragma and pragmaFrag cannot be set when runtime is automatic. when add storybook to theme-ui project

Question

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

and I also tried to add

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

to storbook/main.js but also didn't work

Answer 1

Looks like you were using the old pragma.

For automatic runtime, you would need /** @jsxImportSource theme-ui */ instead. Reference: https://theme-ui.com/guides/jsx-pragma

If you need to switch to classic runtime, you could change the settings in your babel presets. Or you could add this pragma at the top /** @jsxRuntime classic */.

Storybook V6 and V7 handles babel configs differently. You might want to make sure you are referencing the correct docs if you want to over Storybook settings.