Error: importSource cannot be set when runtime is classic.

Describe the bug When using theme-ui@0.6.0 and gatsby@3.1.1 I get the error message importSource cannot be set when runtime is classic.

To Reproduce Steps to reproduce the behavior:

• add /** @jsxImportSource theme-ui */ to the top of the file
• I have a .babelrc that sets runtime to automatic via @babel/plugin-transform-react-jsx and @babel/preset-react
• if I set the runtime via a comment at the top of the file I get the error pragma and pragmaFrag cannot be set when runtime is automatic.

Use branch https://github.com/corbpaul/gatsby-content-demo/tree/logo-icon-component and run yarn storybook to replicate

Expected behavior HTML element should render with the correct value

Screenshots If applicable, add screenshots to help explain your problem.

Additional context Add any other context about the problem here.

[nrakochy]

I ran into this as well in a context outside of gatsby. A potential fix for future travelers

      {
                test: /\.(js|jsx|ts|tsx)$/,
                exclude: /node_modules/,
                loader: "babel-loader",
                options: {
                    presets: [
                        ["@babel/preset-env"],
                        "@babel/preset-typescript",
                        [
                            "@babel/preset-react",
                            {
                                runtime: "automatic",
                                importSource: "react"
                            }
                        ]
                    ],
                    plugins: ["@babel/proposal-class-properties", "@babel/proposal-object-rest-spread"]
                }
            },

[jinhyuk]

As you know, Gatsby uses babel-preset-gatsby as the default preset. so You can solve the problem when you set reactRuntime to automatic in babel-preset-gatsby using .babelrc.

{
  "plugins": [["@babel/plugin-proposal-decorators", { "legacy": true }]],
  "presets": [
    [
      "babel-preset-gatsby",
      {
        "reactRuntime": "automatic",
        "targets": {
          "browsers": [">0.25%", "not dead"]
        }
      }
    ]
  ]
}