Emotion: `@emotion/babel-preset-css-prop` does not work with `ts-loader`

[billyvg]

Current behavior:
The @emotion/babel-preset-css-prop plugin seems to be incompatible with ts-loader. When running babel-loader and ts-loader for typescript files, we get this error message in the DOM:

You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop).

To reproduce:
Example repo here: https://github.com/billyvg/emotion-ts-loader

1. git clone https://github.com/billyvg/emotion-ts-loader
2. yarn && yarn dev
3. Inspect the first line of text and look at the css prop

Expected behavior:
We would expect a class name to be generated.

Environment information:

• react version: 16.12.0
• emotion version: 10.0.27

[Andarist]

@emotion/babel-preset-css-prop do its thing based on JSX syntax being in the file. You are handing it files transpiled already by TS which has JSX already removed (transpiled into React.createElement calls).

To fix this you need to use "jsx": "preserve" in your "compilerOptions".

[billyvg]

Ah, thanks @Andarist