theme-ui: [0.6] Attempted import error: 'createElement' is not exported from 'theme-ui' (imported as '_createElement').

Describe the bug

In order to be able to install Next v10 (which work on React v17), I tried to include the latest theme-ui’s alpha version v0.6.0-alpha.4 and make them work together.

I will surely reverse my changes since theme-ui v0.6 is not in released yet, but I wanted just let you know that I have met this error during the npm running :

Attempted import error: 'createElement' is not exported from 'theme-ui' (imported as '_createElement').

And that happen only when I put Component (which take the current dynamic route in Next):

import React from "react";
import { ThemeProvider } from "theme-ui";
import { theme } from "../styles/theme";
import Layout from "../components/layout";
import { AppProps } from "next/app";

/** @jsxImportSource theme-ui */

const App = ({
  Component,
  pageProps,
  apollo,
  isAuthenticated,
  router,
}: AppProps ) => {
  return (
      <ThemeProvider theme={theme}>
              <Layout  {...pageProps}>
                  <Component {...pageProps} key={router.pathname} />  /** That one **/
              </Layout>
      </ThemeProvider>
  );
};

If Component is commented, then I can see the rest of the page working well (The Header and Footer provided by the Layout)

I’m wondering if I have missed something or if there is a bug from theme-ui

Expected behavior Don’t have that error and see the page display well

Additional context

Next version: 10.0.3
React version: 17.0.1
Theme-ui version: 0.6.0-alpha.4

About this issue

Original URL
State: closed
Created 4 years ago
Comments: 15 (6 by maintainers)

Most upvoted comments

I think this issue needs a change in the docs and Next.js example on our side.

We need to state clearly that

React JSX syntactic sugar can be transformed by one of two JSX runtimes. (Link to React docs, and React Babel preset docs?)
Theme UI 0.6 supports both "classic" and "automatic" runtime.
React 17 supports both "classic" and "automatic" runtime.
CRA uses "automatic" runtime by default. If you don’t modify your Babel config, you need to use jsxImportSource pragma comment with it.
Next.js uses "classic" runtime by default. If you don’t modify your Babel config, you need to use jsxFrag pragma comment with it.
(What is configured by default in Gatsby?)
Next.js and Gatsby allow you to customize your Babel config. The most convenient way to use Theme UI’s jsx is "automatic" runtime (IMHO, this is probably subjective), because you don’t have to write any pragma comments, but you need to configure automatic runtime in your Babel config. Here’s how you do it — give users an example Babel config for Next.js / Gatsby / Any Popular Framework

@dcastil @lachlanjc what do you think about it? Does it make sense?

hasparus on Dec 21, 2020

We’ve significantly improved documentation on our JSX pragma, over here: https://theme-ui.com/guides/jsx-pragma

Going to close this for now, but please flag if there’s improvements we should make!

lachlanjc on Sep 19, 2022

Btw I have noticed that there is a importSource option within preset-react for next/babel, maybe that could be useful to you :

      "preset-react": {
        "runtime": "automatic",
        "importSource": "theme-ui"
      }

But in my case I get that message : importSource cannot be set when runtime is classic. due to the /** @jsxRuntime classic */ that I have to let in the _app.js as I have explained in my previous message

alexis-regnaud on Dec 26, 2020

I also think we should clarify it in the docs. The situation with the two JSX runtimes is really confusing unfortunately.

dcastil on Dec 21, 2020

@alex83130 - you don’t need to go back to 0.4: here is an updated version of your example

https://codesandbox.io/s/nextjs-forked-pqpsj?file=/index.js

atanasster on Dec 21, 2020