CODEWITHSUNDEEP
reactjstypescriptgraphqlrelayrelaymodern
pinguinos
pinguinos

Reputation: 123

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

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!

Upvotes: 2

Views: 1721

Answers (3)

Cody Elhard
Cody Elhard

Reputation: 11

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.

Upvotes: 0

slikts
slikts

Reputation: 8157

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.

Upvotes: 1

Sloth Armstrong
Sloth Armstrong

Reputation: 1066

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.

Upvotes: 3

Related Questions