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