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

[alex83130]

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

[atanasster]

@alex83130 - it should work, the next.js example in the theme-ui repo is using next.js v 10 as well and it works fine. I suspect the error is from the rendered page, not so much from the _app.js file.

Can you check the specific page that gives you this error, or do you have a repo we can take a look at?

[alex83130]

I have created a Codesandbox to try to reduce the problem. Didn't success to get the same error but the sx style does not seem to be taken into account.

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

[alex83130]

I succeeded to make it work when I downgraded theme-ui to 0.4.0-rc.14 (as in your next JS example) and using :

/** @jsxRuntime classic */
/** @jsx jsx */

I met another issue :
My fragment still caused the error transform-react-jsx: pragma has been set but pragmaFrag has not been set when I used the short notation <>Text</> and that work if I replace by <React.Fragment>Text</React.Fragment>

[atanasster]

@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

[alex83130]

Umm strange, everything works well with theme-ui 0.6.0-alpha.4 and

/** @jsxRuntime classic */
/** @jsx jsx */

But as soon as I remove the /** @jsxRuntime classic */ line then I get the pragma and pragmaFrag cannot be set when runtime is automatic issue.

And when I replace both lines by :

/** @jsxImportSource theme-ui */

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

[atanasster]

@alex83130 - the automatic runtime should work with /** @jsxImportSource theme-ui */, although I havent tried it yet.

Can you share an example and we will investigate.

[hasparus]

My fragment still caused the error transform-react-jsx: pragma has been set but pragmaFrag has not been set when I used the short notation <>Text and that work if I replace by Text

/** @jsxFrag React.Fragment */

But this is a digression, I think I have a solution.

The error message seemed odd to me. We don't export _createElement, we export _jsx, as we should for default config of babel/preset-react and babel-plugin-transform-react-jsx.

https://babeljs.io/docs/en/babel-plugin-transform-react-jsx

I opened Next's Babel preset, and it looks like there's a conflict with Next.js Babel config, and that jsxImportSource won't be enough due to this.

https://github.com/vercel/next.js/blob/canary/packages/next/build/babel/preset.ts#L134-L145

Configuring automatic runtime in options["preset-react"] for your next/babel plugin in your Babel config should help, and what's even better, you won't have to write any pragma comment.

[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?

[dcastil]

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

[lachlanjc]

Yep, we should totally cover this. As of now I don't understand all the moving parts of this well enough to write thorough documentation, but if someone else wants to get some docs started, I'd be happy to review/edit/contribute.

[hasparus]

1. It seems MDX doesn't support automatic runtime yet (needs confirmation?), so your Theme UI + Gatsby + MDX blog might need to use the classic runtime for the time being.

[alex83130]

I have applied the runtime config on .babelrc with NextJs :

  "presets": [[
    "next/babel",
    {
      "preset-react": {
        "runtime": "automatic",
      }
    }
  ]]

Then I have replaced all

/** @jsxRuntime classic */
/** @jsx jsx */

by

/** @jsxImportSource theme-ui */

That works well except for the _app.js file, if I use the @jsxImportSource I get : Attempted import error: 'createElement' is not exported from 'theme-ui' (imported as '_createElement').

[alex83130]

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

[okonet]

I have similar problem and I wrote a comment about it on the MDX repo: https://github.com/mdx-js/mdx/pull/1014#issuecomment-751647906. Seems related.