Update to React 17 and Emotion 11

Description

Update the React version to React 17. From what I read, it should be safe to do so while keeping backward compatibility.

Update JSX transform to the new JSX transform that doesn’t require to import React from react anymore.

Possible solution

Update React in @frontity/core and update Babel to use the new JSX transform as described in this post.

Emotion 11 has been released as well: https://github.com/emotion-js/emotion/issues/1606. It also has support for the new JSX transform.

I think it would be great to update both Emotion 11 and React 17 at the same time to avoid extra work.

Also, I think we should do that before we invest time in the Move all CSS to the head issue because the location of those APIs changed in Emotion 11.

And finally, as we are going to invest time in configuring the Emotion cache for that issue, I think should also take a look at a problem with Emotion that the DevRel team has documented in our docs because they are proposing to import directly the Emotion’s cache APIs using direct Emotion imports. Which by the way are going to break as soon as we update to Emotion 11 so that fix is not going to backward compatible :confused:

1 Like

Is there any estimation, when will be this update done? Thanks!

@cristianbote is already working on it :slightly_smiling_face:


By the way, another thing we have to do in this migration is to deprecate our babel plugin in favor of the new importMap function: https://twitter.com/luisherranz/status/1325739078042734592 :tada:

1 Like

This feature has been released :tada: : Read the full Release Announcement.

4 Likes