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-patible'
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 (mand $ 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?

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-patible'
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 (mand $ 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?

• javascript
• relayjs
• vite

3 Answers 3

Might be a bit late, but the issue has been fixed in Relay@13 and you can find some workarounds in this thread for older versions of Relay :

https://github./facebook/relay/issues/3354

You can also try adding the option eagerEsModules: true to your relay babel plugin configuration.

Unless you have some specific usecase that requires the use of babel-plugin-relay, your issue should be resolved if you change your imports from

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

to

import { graphql } from "react-relay";

You should only need the relay vite plugin at that point, and can remove vite-plugin-babel-macros

There's a few things wrong with your setup.

1. Don't use vite-plugin-babel-macros:

Use @vitejs/plugin-react instead.

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import relay from "vite-plugin-relay";

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [relay, react({
      babel: {
        plugins: ['babel-plugin-macros']
      },
    })],
});

You can probably get it to work with vite-plugin-babel-macros, but the later is an official plugin.

2. Don't use 'babel-plugin-relay/macro':

Use the following instead:

import { graphql } from "react-relay";

It's unclear to me why the official docs suggest using babel-plugin-relay/macro, but that just doesn't work.

3. Configure relay.config.js correctly:

{
  "src": "./src",
  "language": "typescript",
  // Change this to the location of your graphql schema
  "schema": "./src/graphql/schema.graphql",
  "exclude": [
    "**/node_modules/**",
    "**/__mocks__/**",
    "**/__generated__/**"
  ],
  "eagerEsModules": true
}

In particular, make sure you use language: typescript and eagerEsModules.

4. Sample repository

I wrote a sample repository showing how to properly configure React Relay with Vite.js and TypeScript, you can find it here.