I am developing a react web app using vite with typescript and I would like to use emotion.js as the styling libray but no luck getting it to work. I follow the official guide here and also this blog. This is the result when I did yarn run dev. I am using node 22 from nvm.

I am at a loss.
Here is the code fragment that imports the emotion js libray.

import React, { ReactNode } from 'react';
import { Layout } from 'antd';
import { Outlet } from 'react-router-dom';
import { css } from '@emotion/css';


interface BackgroundLayoutProps {
    children?: ReactNode
}

const BackgroundLayout: React.FC<BackgroundLayoutProps> = ({children}) => {

  return (
    <Layout className={css`background: black;`} style={{ height : "100vh"}}>
        {children}
        <Outlet />
    </Layout>
  );
};

export default BackgroundLayout;

This is my vite.config.ts

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import commonjs from 'vite-plugin-commonjs'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    react({
      jsxImportSource: "@emotion/react",
      babel: {
        plugins: ["@emotion/babel-plugin"],
      },
    }),
    commonjs(),
  ],
  resolve: {
    alias: {
      src: "/src",
    },
  },
})

This is my tsconfig.json

{
  "compilerOptions": {
    "jsx": "react-jsx",
    "jsxImportSource": "@emotion/react",
    "moduleResolution": "node",
    "baseUrl": ".",
    "paths": {
      "@/components/*": [
        "src/components/*"
      ],
    }
  },
  "files": [],
  "references": [
    {
      "path": "./tsconfig.app.json"
    },
    {
      "path": "./tsconfig.node.json"
    }
  ]
}

A solution is very much appreciated