How to configure Relay.JS in Vite?

I'm trying to migrate my React project from CRA to Vite, this is my vite.config.js:

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import envCompatible from 'vite-plugin-env-compatible'
import relay from "vite-plugin-relay"
import macrosPlugin from "vite-plugin-babel-macros"
import path from 'path';
import fs from 'fs/promises';

export default defineConfig({
  resolve: {
    alias: {
      '~': path.resolve(__dirname, 'src'),
      '@material-ui/core': path.resolve(__dirname, 'node_modules/@material-ui/core')
    }
  },
  esbuild: {
    loader: "tsx",
    include: /src\/.*\.[tj]sx?$/,
    exclude: [],
  },
  optimizeDeps: {
    esbuildOptions: {
      plugins: [
        {
          name: "load-js-files-as-jsx",
          setup(build) {
            build.onLoad({ filter: /src\/.*\.js$/ }, async (args) => ({
              loader: "tsx",
              contents: await fs.readFile(args.path, "utf8"),
            }));
          },
        },
      ],
    },
  },
  define: {
    global: {},
  },
  plugins: [
    envCompatible(),
    react(),
    relay,
    //macrosPlugin(),
  ],
})

My GraphQL query files are like this:

import graphql from 'babel-plugin-relay/macro'

const getQuery = () => graphql`
    query UserQuery($id: ID!) {
      user(id: $id) {
        id
        fullName
      }
    }
  `

export default getQuery

When I tried to run the project in dev mode (command $ vite), I got this error:

So I did some search and replaced vite-plugin-relay to vite-plugin-babel-macros like this:

// others import
import relay from "vite-plugin-relay"
import macrosPlugin from "vite-plugin-babel-macros"

export default defineConfig({
  // configs like bellow
  plugins: [
    envCompatible(),
    react(),
    //relay,
    macrosPlugin(),
  ],
})

So I started to get a new error:

How can I configure Relay to work on Vite.JS?