[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

[hasparus]

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

We need to state clearly that

1. React JSX syntactic sugar can be transformed by one of two JSX runtimes. (Link to React docs, and React Babel preset docs?)
2. Theme UI 0.6 supports both "classic" and "automatic" runtime.
3. React 17 supports both "classic" and "automatic" runtime.
4. CRA uses "automatic" runtime by default. If you don’t modify your Babel config, you need to use jsxImportSource pragma comment with it.
5. Next.js uses "classic" runtime by default. If you don’t modify your Babel config, you need to use jsxFrag pragma comment with it.
6. (What is configured by default in Gatsby?)
7. 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?

[lachlanjc]

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!