Chakra ui version 1

🙋Get Help
1

Hello all,

I’ve forked chakra ui: https://github.com/chakra-ui/frontity-chakra-ui-theme and it works very well up to version

        "@chakra-ui/core": "^1.0.0-rc.8",

When I upgrade Chakra and Frontity to the latest version Chakra components are not styled correctly.

Chakra’s Upgrade guide says:

Remove the emotion-theming package. As at emotion v11, emotion-theming as been removed and all it's functionality as been migrated to @emotion/react.
Rename the @emotion/core package to @emotion/react. @emotion/core was recently changed to @emotion/react following the v11 release by the emotionjs team.
Rename the @chakra-ui/core package to @chakra-ui/react.
Update the @emotion/styled package to v11.

I believe the issue I’m experencing is because:

Chakra is using:

"@emotion/react": "^11.0.0",
"@emotion/styled": "^11.0.0",

And Frontity “version”: “1.9.1” is using:

 "@emotion/core": "^10.0.22",

Thoughts?

Cheers,
Maurice

1 Like
2

Hi @maurice.tadros

Thanks for bringing this to our attention. I think that this needs to be addressed by a member of our development team. @David can you help out here?

3

Hi there!

I think you’re totally right and I think the issue is due to the different emotion version. We have in mind to update Frontity to use React 17 and Emotion 11 as explained in the Feature Discussion. I assume this would solve your issue. In the meantime, I would recommend to keep using the previous version of Chakra until this is updated in the Frontity side.

4

@SantosGuillamot,

Once Frontity is updated I’ll update Chakra and let you guys know if that solves the problem.

Cheers,
Maurice

1 Like
5

Since the update (Update to React 17 and Emotion 11) it’s working again! :slight_smile:
Big thanks Frontity Dev Team!

3 Likes
6

Thank you Dev Team and @koli14, This works as expected. Upgrading the original Chakra/Frontity theme has a couple of minor issues but I’ll fix those in a few days then make a pull request.

3 Likes