How to configure Emotion js with Vite 4 in React TypeScript project

Question

I am migrating from Webpack to Vite in my React Typescript app.

I try to get Emotion js to work.

"@vitejs/plugin-react": "^4.0.1",
"vite": "^4.3.9",
"@emotion/react": "^11.11.1",
"@emotion/styled": "^11.11.0",

Its compiling client after npm start but I got the following error:

[vite] warning: The JSX factory cannot be set when using React's "automatic" JSX transform 1 | import RefreshRuntime from "/@react-refresh";const inWebWorker = typeof WorkerGlobalScope !== 'undefined' && self instanceof WorkerGlobalScope;let prevRefreshReg;let prevRefreshSig;if (import.meta.hot && !inWebWorker) { if (!window.vite_plugin_react_preamble_installed) { throw new Error( "@vitejs/plugin-react can't detect preamble. Something is wrong. " + "See https://github.com/vitejs/vite-plugin-react/pull/11#discussion_r430879201" ); } prevRefreshReg = window.$RefreshReg$; prevRefreshSig = window.$RefreshSig$; window.$RefreshReg$ = (type, id) => {
RefreshRuntime.register(type,

My steps to add Emotion to Vite:

1. Add this rule to .eslintrc.cjs:

"rules": { "react/no-unknown-property": ['error', { ignore: ['css'] }] }

2. Add to tsconfig.json: "types": ["vite-plugin-svgr/client", "@emotion/react/types/css-prop"],

3. Add to Vite config vite.config.ts:

   export default defineConfig({ plugins: [ react({ jsxImportSource: '@emotion/react', }),

In my React component I still get:

'jsx' is declared but its value is never read.ts(6133)

/** @jsx jsx */
import { jsx, useTheme } from '@emotion/react';
import { Link } from 'react-router-dom';

import { RTLLogo } from 'app/components/atoms/icons';
import { HomePage } from 'app/routes/paths';

import Styles from './Logo.styles';
import { Props } from './Logo.types';

const MyComponent = ({ classes }: Props) => {
  const theme = useTheme();
  const styles = Styles({ theme, classes });

  return (
    <Link to={HomePage} css={styles.root}>
      <Logo />
    </Link>
  );
};

export default MyComponent;

Answer 1

I had a similar problem and solved it with a little bit different setup:

• Step 2: Instead of "types": ["vite-plugin-svgr/client", "@emotion/react/types/css-prop" add "jsxImportSource": "@emotion/react" to the tsconfig.json file:

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

• Step 3: Your vite.config.ts file seems to be correct. As per this comment, the @jsx pragma solution and jsxImportSource are interchangable, so feel free to replace

/** @jsx jsx */
import { jsx, useTheme } from '@emotion/react';

with the following

import { useTheme } from '@emotion/react';

Note: I am using Typescript v5.1.3