如何在Vite中配置Relay.JS？

Question

我正在尝试将我的 React 项目从 CRA 迁移到 Vite，这是我的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(),
  ],
})

我的 GraphQL 查询文件是这样的：

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

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

export default getQuery

当我尝试在开发模式（命令）下运行项目时$ vite，出现以下错误：

所以我做了一些搜索并替换vite-plugin-relay为vite-plugin-babel-macros这样的：

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

所以我开始收到一个新错误：

如何配置 Relay 在 Vite.JS 上工作？

Answer 1

可能有点晚了，但问题已在 Relay@13 中得到解决，您可以在此线程中找到针对旧版本 Relay 的一些解决方法：

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

您还可以尝试将该选项添加eagerEsModules: true到您的中继 babel 插件配置中。