Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
alexis-regnaud opened this issue Dec 20, 2020 · 15 comments
Labels
affects-docs Changes affect documentation, but not only documentation bug Something isn't working

Comments

@alexis-regnaud
Copy link

alexis-regnaud commented Dec 20, 2020

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
@alexis-regnaud alexis-regnaud changed the title Attempted import error: 'createElement' is not exported from 'theme-ui' (imported as '_createElement'). [0.6] Attempted import error: 'createElement' is not exported from 'theme-ui' (imported as '_createElement'). Dec 20, 2020
@atanasster
Copy link
Collaborator

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

@alexis-regnaud
Copy link
Author

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

@alexis-regnaud
Copy link
Author

alexis-regnaud commented Dec 20, 2020

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
Copy link
Collaborator

@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

@alexis-regnaud
Copy link
Author

alexis-regnaud commented Dec 21, 2020

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
Copy link
Collaborator

@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 hasparus added bug Something isn't working affects-docs Changes affect documentation, but not only documentation labels Dec 21, 2020
@hasparus
Copy link
Member

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>

/** @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
Copy link
Member

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
Copy link
Contributor

dcastil commented Dec 21, 2020

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

@lachlanjc
Copy link
Member

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
Copy link
Member

  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.

@alexis-regnaud
Copy link
Author

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').

@alexis-regnaud
Copy link
Author

alexis-regnaud commented Dec 26, 2020

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
Copy link

okonet commented Dec 28, 2020

I have similar problem and I wrote a comment about it on the MDX repo: mdx-js/mdx#1014 (comment). Seems related.

@lachlanjc
Copy link
Member

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!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
affects-docs Changes affect documentation, but not only documentation bug Something isn't working
Projects
None yet
Development

No branches or pull requests

6 participants