Emotion: Use with Next.js and Typescript there is error:'Global' refers to a value, but is being used as a type here

[rumsky]

Current behavior:
Use with Next.js and Typescript there is error:'Global' refers to a value, but is being used as a type here

To reproduce:
Add global style in nextjs _app.js:
<Global styles={css
html,
body {
padding: 3rem 1rem;
margin: 0;
background: papayawhip;
min-height: 100%;
font-family: Helvetica, Arial, sans-serif;
font-size: 24px;
}
} />

Environment information:

• react version:16.13.1
• emotion version:10.0.27

[Andarist]

Most likely you'd have to change the extension of the file in question to .tsx (or .jsx)

[Andarist]

Closing as I've already pointed out the most probable cause in the past and haven't heard back from the OP since then.

[pmdy]

Changing extension to .tsx worked.

Used this example as a guide to include emotion with NextJS, here using .js, instead of .jsx: https://github.com/vercel/next.js/blob/canary/examples/with-emotion/shared/styles.js