Emotion css styled gives me error using same code as example

Question

I am trying to use Emotion.sh in my React test project butI get the following error using the same code as in example

Things to consider that might have a conflit: 1. I was using npm, now I am using yarn; 2. I already have a small project, and I changed only my App.js to fit exactly the same as the example 3. I am very new to all this =]

Answer 1

Andre, I think your problem relates to emotion's babel plugin that emotion uses.

Without the babel plugin, your syntax should look like this:

const Wrapper = styled('div')`
    text-align: center;
`

With the babel plugin, you can use the syntax that you are already using:

const Wrapper = styled.div`
    text-align: center;
`

See the link above for installation instructions and babel config.