Search code examples
reactjscreate-react-appbabeljsemotion

How to user babel emotion macro in create-react-app?

I'm trying to use emotion in my create-react-app, but getting errors when using the macro method explained here.

I just tried copying over the import code in a component like this:

import React from "react";
import styled from "react-emotion/macro";
import { css, keyframes, injectGlobal, flush, hydrate } from "emotion/macro";
import css from "@emotion/css/macro";
import styled from "@emotion/styled/macro";

function Registration(props) {
  return;
}

export default Registration;

The first error I get is Parsing error: Identifier 'css' has already been declared. So I commented out the import css and import styled lines to see if it would return anything else. This gave me the error Cannot find module 'react-emotion/macro' from ....

What step am I missing? Or is there another way that I should be including emotion in the app?

Solution

  • Answering my own question in case anyone has the same problem. With v10 of emotion and create-react-app (I believe greater than v2), react-emotion is not required. Also, I didn't need styled, so with the following it works:

    import React from "react";
import css from "@emotion/css/macro";

function Registration(props) {
  return
}

export default Registration;