AST Node error when following Relay Step by step guide

Question

I’m following the Relay Doc’s Step by step guid but is encountering a AST node error when trying to yarn start after Step 5, anyone had any idea what’s the problem?

Writing js
ERROR:
Invalid AST Node: { kind: "Root", operation: "query", loc: { kind: 
"Source", start: 3, end: 105, source: [Source] }, metadata: null, 
name: "AppRepositoryNameQuery", argumentDefinitions: [], 
directives: [], selections: [[Object]], type: Query }.
error Command failed with exit code 100.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation 
about this command.

Code:

// your-app-name/src/App.js
import React from 'react';
import './App.css';
import fetchGraphQL from './fetchGraphQL';

const { useState, useEffect } = React;

function App() {
  // We'll load the name of a repository, initially setting it to null
  const [name, setName] = useState(null);

  // When the component mounts we'll fetch a repository name
  useEffect(() => {
    let isMounted = true;
    fetchGraphQL(`
      query RepositoryNameQuery {
        # feel free to change owner/name here
        repository(owner: "facebook" name: "relay") {
          name
        }
      }
    `).then(response => {
      // Avoid updating state if the component unmounted before the fetch completes
      if (!isMounted) {
        return;
      }
      const data = response.data;
      setName(data.repository.name);
    }).catch(error => {
      console.error(error);
    });

    return () => {
      isMounted = false;
    };
  }, [fetchGraphQL]);

  // Render "Loading" until the query completes
  return (
    <div className="App">
      <header className="App-header">
        <p>
          {name != null ? `Repository: ${name}` : "Loading"}
        </p>
      </header>
    </div>
  );
}

export default App;

Environment: WSL2 Ubuntu

Please find the code from the step by step guide at Relay doc

Edit: I discovered that this error only occur when I am trying to use the relay-compiler installed in the project’s node_modules folder and using globally installed version of it solved the problem

Answer 1

When following the step-by-step guide, by running one of the following commands of step 4, graphql version 16.0.1 is installed:

npm install --save-dev relay-compiler graphql babel-plugin-relay
-- or --
yarn add --dev relay-compiler graphql babel-plugin-relay

However, relay-compiler has a peer-dependency of graphql version 15 (^15.0.0). So to fix the error, replace the command with:

npm install --save-dev relay-compiler graphql@^15.0.0 babel-plugin-relay
-- or --
yarn add --dev relay-compiler graphql@^15.0.0 babel-plugin-relay

Related GitHub issue: https://github.com/facebook/relay/issues/3622