Error pragma and pragmaFrag cannot be set when runtime is automatic on alexadark/frontity-starter-theme?

🙋Get Help
#1

Hi team, @alexaspalato :wave:

When i try to run npx frontity dev i get this error
`
Error: ./packages/frontity-starter-theme/src/components/index.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
SyntaxError: /Users/dejangeorgiev/Code/frontity-theme-ui-tailwindcss/packages/frontity-starter-theme/src/components/index.js: pragma and pragmaFrag cannot be set when runtime is automatic.

1 | /** @jsx jsx */
| ^
2 | import { jsx, Flex, ThemeProvider } from “theme-ui”;
3 | import theme from “…/theme-ui”;
4 | import { Global, connect, Head } from “frontity”;`

image

I did some research but didn’t found anything that might fix this issue. Can someone please assist me on this?

Thanks a lot.

#2

I’m running in to the same issue!

I just re-edited this as the issue seems to be related to React 17, but I could be wrong! I think it has to do with the new JSX transform? Either way, I tried a couple of themes and they both had the same issue.

#3

Hi @dejangeorgiev and @ShaGui thanks for posting this question!

Indeed with the last frontity versions we’ve updated the versions to React 17 and Emotion 11. With these changes, the jsx runtime now handles the transformations for jsx to createElement calls. With that, emotion needs to handle the jsx runtime as well so we had to let emotion’s babel plugin take over the jsx runtime.

But, looking more specifically at how theme-ui handles the jsx it seems that you can actually drop the jsx comment at the top https://theme-ui.com/guides/how-it-works/#jsx-pragma.
Would that work for you?

If you can link to a repo or CodeSandbox we could help out in a more practical way.

Let us know if this helps.
Cheers!

1 Like
#4

Hi @cristianbote :wave:

Thank you very much for providing this information. This works, however the theme is designed with styled-components and not with Emotion. I suggest if you got a 15min. time to play around to do the following in order to reproduce the issue.

  1. Clone the repo
  2. Update the dependencies
  3. Run the dev server

Then you will see the same issue as i described above. You can try to install @emotions/core , @emotions/react and @emotions/styled this will fix the issue with Pragma, but will broke the style structure.

I know there are no issues with Frontity packages and this is a third-party theme, but let me know if you have any insights on that. :slight_smile:

Thanks a lot for your help.
Dejan

#5

I had already tried, but I then ran into another, separate issue with the loaders (react-spinners). I’ll try and create a repo for an example.

#6

Hi @ShaGui

Try to remove the react-spinners from Loader.js then you will face the issue with emotion styling.

Thanks for trying out!

1 Like