question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Error: importSource cannot be set when runtime is classic.

See original GitHub issue

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.

Issue Analytics

  • State:closed
  • Created 2 years ago
  • Comments:5 (1 by maintainers)

github_iconTop GitHub Comments

5reactions
nrakochycommented, Apr 3, 2021

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"]
                }
            },
4reactions
jinhyukcommented, Mar 26, 2021

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"]
        }
      }
    ]
  ]
}
Read more comments on GitHub >

github_iconTop Results From Across the Web

Getting error (importSource cannot be set when runtime is ...
Getting error (importSource cannot be set when runtime is classic) when running Quokka.js with CRA and Emotion using css prop ; "runtime": " ......
Read more >
Migrating to React 17 and Fixing the JSX Runtime Error with ...
Solution 1​​ Add another jsx pragma that configures the new jsx runtime to classic mode.
Read more >
babel/preset-react
Replaces the import source when importing functions. React Classic Runtime. pragma. string , defaults to React.createElement ...
Read more >
JSX Pragma - Theme UI
Theme UI uses custom JSX functions and JSX import source comments to allow you ... Technically Babel also calls jsxs from react/jsx-runtime and...
Read more >
React 17 Emotion Build Error - Jiahao Chen
pragma and pragmaFrag cannot be set when runtime is automatic. > /** @jsx jsx */. TL;DR;. Do this: /** @jsxRuntime classic */ /**...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found