Estoy tratando de migrar mi proyecto React de CRA a Vite, este es mi 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(), ], })

Mis archivos de consulta de GraphQL son así:

 import graphql from 'babel-plugin-relay/macro' const getQuery = () => graphql` query UserQuery($id: ID!) { user(id: $id) { id fullName } } ` export default getQuery

Cuando traté de ejecutar el proyecto en modo de desarrollo (comando $ vite ), recibí este error:

Así que hice una búsqueda y reemplacé vite-plugin-relay por vite-plugin-babel-macros así:

 // 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(), ], })

Entonces comencé a obtener un nuevo error:

¿Cómo puedo configurar Relay para que funcione en Vite.JS?