React/Relay Modern/GraphQL Simple Project Setup with Babel Issues

Question

I followed the Relay tutorial for getting started after doing the create-react-app to get a new react up and running. I ran it both in TypeScript mode (from here: https://github.com/Microsoft/TypeScript-React-Starter) and also in the normal JavaScript mode and came to the same result initially.

This is the error I'm getting when I try and run the app:

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

My suspicion is that Babel was just not running at all, but I'm not sure if that's completely true. I followed this: https://hackernoon.com/using-create-react-app-with-relay-modern-989c078fa892 to see if that would help get my babel executing within my new create-react-app + relay app with no luck. I even ejected the app from create-react-app and modified the webpack to get it working. Below are what I believe are the relevant files. I've done a ton of searching on this topic with no such luck and can't find an example that's using React + Relay Modern + Graphql.

package.json

{
  "name": "testProj",
  "version": "0.1.0",
  "private": true,
  "metadata": {
    "graphql": {
      "schema": "./graphql/testProj.json"
    }
  },
  "dependencies": {
    "@babel/polyfill": "^7.0.0-beta.42",
    "@babel/runtime": "^7.0.0-beta.42",
    "react": "^16.2.0",
    "react-dom": "^16.2.0",
    "react-relay": "^1.5.0",
    "react-scripts-ts": "2.14.0",
    "relay-runtime": "^1.5.0"
  },
  "scripts": {
    "start": "node ./setup && react-scripts-ts start",
    "build": "node ./setup && react-scripts-ts build",
    "test": "node ./setup && react-scripts-ts test --env=jsdom",
    "relay": "relay-compiler --src ./src --schema graphql/implementato.graphql --extensions ts tsx"
  },
  "devDependencies": {
    "@babel/register": "^7.0.0-beta.42",
    "@types/jest": "^22.2.0",
    "@types/node": "^9.4.7",
    "@types/react": "^16.0.40",
    "@types/react-dom": "^16.0.4",
    "@types/react-relay": "^1.3.4",
    "babel-plugin-relay": "^1.5.0",
    "babel-plugin-styled-components": "^1.5.1",
    "babel-relay-plugin-loader": "^0.11.0",
    "graphql": "^0.13.2",
    "relay-compiler": "^1.5.0",
    "typescript": "^2.7.2"
  }
}

setup.js

const fs = require('fs');
const path = require('path');

const file = path.resolve('./node_modules/babel-preset-react-app/index.js');
let text = fs.readFileSync(file, 'utf8');

if (!text.includes('babel-plugin-relay')) {
    if (text.includes('const plugins = [')) {
        text = text.replace(
            'const plugins = [',
            "const plugins = [\n  require.resolve('babel-plugin-relay'),",
        );
        fs.writeFileSync(file, text, 'utf8');
    } else {
        throw new Error(`Failed to inject babel-plugin-relay.`);
    }
}

App.tsx (or App.jsx)

import * as React from 'react';
import { QueryRenderer, graphql } from 'react-relay';
import environment from './environment';

const query = graphql`
  query AppQuery{
    allAccounts {
      totalCount
    }
  }`;

class App extends React.Component {
  render() {
    return (
      <QueryRenderer
        environment={environment}
        query={query}
        variables={{}}
        render={({ error, props }) => {
          if (error) {
            return <div>Error!</div>;
          }
          if (!props) {
            return <div>Loading...</div>;
          }
          return <div>Loaded!</div>;
        }}
      />
    );
  }
}

export default App;

Please let me know if any more files or information would be helpful. I'd really appreciate any direction I can get. Thanks!

What are the sequence of scripts from your package.json you've executed to get to that error? — hisa_py, Mar 19 '18 at 21:30
`yarn relay --watch` in one terminal and `yarn start` in another terminal after the first one completes. — pinguinos, Mar 19 '18 at 21:39
Is `yarn relay --watch` creating the corresponding `.graphql.js` files or it does nothing? — hisa_py, Mar 20 '18 at 12:19

score 3 · Accepted Answer · answered Mar 20 '18 at 13:34

I ran into this exact issue on the same tutorial. Basically, this is a Babel configuration issue. There are ways to jump through hoops getting this to work with create react app but the easiest way it to just eject the app and do the following steps:

Run react-scripts eject (make sure react-scripts is installed globally)

Adjust your Webpack config to include 'babel-loader':

{
    test: /\.jsx$/,
    exclude: /node_modules/,
    loader: 'babel-loader'
},

Add .babelrc to you project's root directory:

{
    "presets": [
        "env"
    ],
    "plugins": [
        "relay"
    ]
}

Install babel-core, babel-preset-env, and babel-loader as dev dependencies in your project.

Once Babel is running properly you should no longer get the error you are seeing.

Yeah, this seems to have worked. I would love a solution doesn't require ejecting the create-react-app though. — pinguinos, Mar 23 '18 at 21:44

score 1 · Answer 2 · answered Dec 15 '18 at 16:58

1

In case of create-react-app, you can avoid having to eject by installing babel-plugin-relay/macro and doing this:

import graphql from "babel-plugin-relay/macro";

Instead of importing the graphql tag from react-relay.

answered Dec 15 '18 at 16:58

slikts

8,020
1
27
47

score 0 · Answer 3 · answered Feb 15 '22 at 20:29

React Native

In case of create-react-app, you can avoid having to eject by installing babel-plugin-relay/macro and doing this:

import graphql from "babel-plugin-relay/macro"; Instead of importing the graphql tag from react-relay.

Don't forget to add plugins: ['macros'] to your babel config. Using the package babel-plugin-macros to avoid the node crypto error.

React/Relay Modern/GraphQL Simple Project Setup with Babel Issues

3 Answers3