How to fix vite warning: The JSX import source cannot be set?

Question

I'm running a react app with vite using emotion css. In order to use the css attritbute of emotions on html-elements I need to set a special comment to enable a vite build:

/** @jsxImportSource @emotion/react */
import { css, jsx } from "@emotion/react"

It used to work fine but now I get the following warning and I don't know what it means and how to fix it:

[vite] warning: The JSX import source cannot be set without also enabling React's "automatic" JSX transform

Answer 1

Try to add this into your tsconfig.json

{
  "compilerOptions": {
    ...
    "jsxImportSource": "@emotion/react",
    ...
  },
}

Source: https://emotion.sh/docs/typescript#emotionreact