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
– Yosef Weiner, Commented Apr 23, 2017 at 13:26
react native preset takes care of that. So ideally it should work — Harkirat Saluja
– Harkirat Saluja, Commented Apr 23, 2017 at 13:27

Kerumen · Accepted Answer · 2017-04-23 22:00:15Z

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, 2017 at 22:00

answered Apr 23, 2017 at 16:02

Kerumen

4,3512 gold badges21 silver badges34 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Harkirat Saluja Over a year ago

Well according to relay docs, my babelrc is correct. facebook.github.io/relay/docs/….

Kerumen Over a year ago

@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.

Harkirat Saluja Over a year ago

I think the docs are updated, i used this config long back. But the nested ones are still working for me

Harkirat Saluja · Accepted Answer · 2017-04-23 18:13:53Z

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 :)

Collectives™ on Stack Overflow

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

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related