Using react-native-config with babelRelayPlugin with remote graphql schema

Question

My react native code was working fine till yesterday, but today while I was trying to compile the code I am getting this strange error.

node /Users/aragorn/relay-react-native-app/node_modules/react-native/local-cli/cli.js bundle --entry-file index.ios.js --platform ios --dev true --reset-cache --bundle-output check.js
[04/23/2017, 18:48:40] <START> Initializing Packager
[04/23/2017, 18:48:49] <START> Building Haste Map
[04/23/2017, 18:48:50] <END>   Building Haste Map (751ms)
[04/23/2017, 18:48:50] <END>   Initializing Packager (9888ms)
[04/23/2017, 18:48:50] <START> Transforming files
Warning: The transform cache was reset.

TransformError: /Users/aragorn/relay-react-native-app/index.ios.js: Unexpected token import.

Following is my .babelrc file which I add because I need to add because I am using relay with react-native.

{
  "passPerPreset": true,
  "presets": [
    {
      "plugins": [
        "./plugins/babelRelayPlugin"
      ]
    },
    "react-native"
  ]
}

I am struggling with this for quite some time. Can someone please help?

Also, I have added all babel depedencies in my package.json:-

 "devDependencies": {
    "babel-jest": "18.0.0",
    "babel-preset-react-native": "1.9.1",
    "babel-cli": "6.18.0",
    "babel-core": "6.21.0",
    "babel-relay-plugin": "0.10.0",
    "jest": "18.0.0",
    "react-test-renderer": "15.4.1",
    "babel-eslint": "7.1.1",
    "eslint": "3.13.1",
    "eslint-config-eslint": "3.0.0",
    "eslint-friendly-formatter": "2.0.7",
    "eslint-loader": "1.6.1",
    "eslint-plugin-import": "2.2.0",
    "eslint-plugin-jsx-a11y": "3.0.2",
    "eslint-plugin-react": "6.9.0"
  },

I don't have experience with react native, but wouldn't you need the es2015 preset in your Babel config to parse import statements? — Yosef Weiner, Apr 23 '17 at 13:26
react native preset takes care of that. So ideally it should work — Harkirat Saluja, Apr 23 '17 at 13:27

Kerumen · Answer 1 · 2017-04-23T22:00:15.097

3

Your .babelrc is wrong. You must add a top-level key for the plugins but not nest it into presets. Hence the correct one is:

{
  "passPerPreset": true,
  "plugins": [
    "./plugins/babelRelayPlugin"
  ],
  "presets": [
    "react-native"
  ]
}

edited Apr 23 '17 at 22:00

answered Apr 23 '17 at 16:02

Kerumen

4,193
2
19
33

Well according to relay docs, my babelrc is correct. https://facebook.github.io/relay/docs/guides-babel-plugin.html#react-native-configuration. – Harkirat Saluja Apr 23 '17 at 16:10
1

@HarkiratSaluja Okey indeed I need to swap the order. But still, you cannot nest the `plugins` key into the `presets` key. Double-check the docs you linked. Edited. – Kerumen Apr 23 '17 at 21:59
I think the docs are updated, i used this config long back. But the nested ones are still working for me – Harkirat Saluja Apr 24 '17 at 07:38

score 0 · Accepted Answer · answered Apr 23 '17 at 18:13

So, after diving a bit more into this I finally figured out what was wrong.

I had added react-native-config package to handle different environments(development and production). For my relay plugin I call the graphql for schema validation.

Now, this graphql API I was fetching from react-native-config package, as it would change for development and production.

React-native-config is based entirely on es2015 and hence the imports fails and I get the error import is unexpected config as react native preset is specified after relay plugin.

.babelrc (works fine)

{
  "passPerPreset": true,
  "presets": [
    {
      "plugins": [
        "./plugins/babelRelayPlugin"
      ]
    },
    "react-native"
  ]
}

babelRelayPlugin.js ( code with issue)

const babelRelayPlugin = require("babel-relay-plugin");
const introspectionQuery = require("graphql/utilities").introspectionQuery;
const request = require("sync-request");
//const {SCHEMA} = require("../js/network/api"); //code with issue

const SCHEMA = "http://dev.api.wealthydev.in/gapi/graphiql/";

const response = request("GET", SCHEMA, {
  "qs": {
    "query": introspectionQuery
  }
});

const schema = JSON.parse(response.body.toString("utf-8"));

module.exports =  babelRelayPlugin(schema.data);

api.js

const {serverURL,devServerURL} = require("../env");
const SCHEMA = `${devServerURL}/gapi/graph-schema/`;

module.exports ={
  // other urls
  SCHEMA,
}

env.js

"use strict";
import Config from "react-native-config"; // main issue lies here

module.exports = {
  "serverURL": Config.API_URL,
  "devServerURL": Config.DEV_SERVER_API_LEVEL,
  "mobileWebURL": Config.MOBILE_WEB_URL,
  "version": "1.0",
  "apiLevel": "v0"
};

So for now I am directly specifying the SCHEMA URL in the babelRelayPlugin file itself. Plan to change the URL before archiving. Its a hack but should work till I find something better.

Hope it helps someone :)

Using react-native-config with babelRelayPlugin with remote graphql schema

2 Answers2