Basic Config Help

[colleen-love]

Hello. I followed the getting started instructions to get up and running with the plugin. Unfortunately, things aren't working as expected.

Here is my vite config:

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import relay from 'vite-plugin-relay'
export default defineConfig({
  server: {
    port: 3000,
  },
  plugins: [react(), relay],
});

The order of the plugins does not seem to matter. And here's my graphql query:

import {graphql} from "relay-runtime";
const getUserQuery = graphql`
  query GetUserQuery($input: GetRequest!) {
    getUser(input: $input) {
      id
    }
  }
`
export default getUserQuery;

Unfortunately, this results in the following error

Uncaught Invariant Violation: graphql: Unexpected invocation at runtime. Either the Babel transform was not set up, or it failed to identify this call site. Make sure it is being used verbatim as `graphql`. Note also that there cannot be a space between graphql and the backtick that follows.
    at invariant (http://localhost:3000/node_modules/.vite/deps/chunk-HCDSWF2A.js?v=97bd1526:224:19)
    at graphql (http://localhost:3000/node_modules/.vite/deps/chunk-HCDSWF2A.js?v=97bd1526:1176:21)
    at http://localhost:3000/src/queries/LoginMutation.ts?t=1660257715549:2:30

Which leads me to believe that the plugin isn't running. How can I configure the plugin to run the babel transformation?

[tobias-tengler]

Are you using Vite 3? There are some issues with it. I've just add a PR that should address all of these issues: https://github.com/oscartbeaumont/vite-plugin-relay/pull/424 Once it's merged you should be able to correctly set it up again, by following the README :)

[colleen-love]

I am indeed using vite 3; thanks for putting together that PR. I added your github branch as a dependency and am still running into the same error. I ensured that it was the correct (and only) vite-plugin-relay installed. Here's everything that I did to get set up:

yarn add react react-dom react-relay
yarn add --dev relay-compiler babel-plugin-relay graphql vite-plugin-relay@https://github.com/tobias-tengler/vite-plugin-relay#tte/fix-plugin

From there I configured relay in my package.json and updated my vite config to include the relay plugin. Finally, I'm importing graphql from relay-runtime.

import {graphql} from "relay-runtime";

I feel like I'm missing something obvious here. Any thoughts?

And thank you - I really appreciate your help.

[tobias-tengler]

I'm looking into it :)

[tobias-tengler]

@collinscangarella Can you try the latest branch version? It should work as expected now :)

[colleen-love]

Awesome! Thank you so much.

[tobias-tengler]

@collinscangarella I also started working on a small tool to automate the tedious Relay setup: https://github.com/tobias-tengler/create-relay-app It currently installs the vite-plugin-relay package from my branch (as you did in your workaround), but once my PR here is merged and a new version has been published, I will reference "the real" package again.

If you happen to have to setup a new Relay project in the future, I would be happy, if you could try out my tool and give feedback if something doesn't work :)

[oscartbeaumont]

The v2 version has just been released on npm. If it fixes this problem would be good to close the issue.

[mykhaliuk]

Hello @oscartbeaumont First, I want to thank you for your job. 🙏🏻

I have a question please: does vite-relay-plugin work with the relay multi-config? I have the following relay.config.json and always got react.development.js:1407 Uncaught ReferenceError: require is not defined error.

{
  "root": ".",
  "excludes": ["**/__mocks__/**", "**/__generated__/**"],
  "sources": {
    "src/Apps/Admin": "admin",
    "src/Apps/Benchmark": "bench"
  },
  "codegenCommand": "./x relay",
  "projects": {
    "admin": {
      "language": "typescript",
      "schema": "schema-admin.graphql",
      "eagerEsModules": true,
      "requireCustomScalarTypes": true,
      "customScalarTypes": {
        "UUID": "string",
        "LocalDate": "string",
        "HexColorCode": "string"
      },
      "output": "src/types/admin",
      "schemaExtensions": []
    },
    "bench": {
      "language": "typescript",
      "output": "src/types/benchmark",
      "eagerEsModules": true,
      "schema": "schema.graphql",
      "requireCustomScalarTypes": true,
      "customScalarTypes": {},
      "schemaExtensions": []
    }
  }
}

Did I miss something?

Thanks ☺️

[livwvil]

Did I miss something?

Use this fork and configure plugin with:

{
  eagerEsModules: true,
  artifactDirectory: 'src/types/admin',
}

I want to use this original plugin but can't.