GraphQL babel transform collides with react-native packager

[tychota]

( This was also reported at apollo side : apollographql/apollo-client#261)
I was trying to use Apollo Client on React-Native.
I did get a red error screen.

$export is not a function

<unknown>
    es6.object.define-property.js:5
loadModuleImplementation
    require.js:122
guardedLoadModule
    require.js:65
_require
    require.js:49
<unknown>
    define-property.js:3
loadModuleImplementation
    require.js:122
guardedLoadModule
    require.js:65
_require
    require.js:49
<unknown>
    define-property.js:3
loadModuleImplementation
    require.js:122

My package.json is:

{
  "name": "Gooz",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "start": "node node_modules/react-native/local-cli/cli.js start",
    "test": "mocha --require react-native-mock/mock.js --require ./mocks --compilers js:babel-core/register 'js/**/*.spec.js' || true",
    "watch": "mocha --require react-native-mock/mock.js --require ./mocks --compilers js:babel-core/register 'js/**/*.spec.js' --watch || true",
    "eslint": "eslint 'js/**/*.js' || true",
    "postinstall": "rndebugger-open"
  },
  "dependencies": {
    "apollo-client": "^0.3.19",
    "react": "15.1.0",
    "react-native": "^0.28.0",
    "react-native-router-flux": "^3.30.2",
    "react-redux": "^4.4.5",
    "redux": "^3.5.2"
  },
  "devDependencies": {
    "babel-core": "^6.10.4",
    "babel-eslint": "^6.1.0",
    "babel-jest": "^13.0.0",
    "babel-preset-react-native": "^1.9.0",
    "babel-plugin-syntax-async-functions": "6.5.0",
    "babel-plugin-transform-class-properties": "6.6.0",
    "babel-plugin-transform-flow-strip-types": "6.7.0",
    "babel-plugin-transform-object-rest-spread": "6.6.5",
    "babel-plugin-transform-regenerator": "6.6.5",
    "babel-plugin-transform-runtime": "6.6.0",
    "babel-preset-es2015": "6.6.0",
    "babel-runtime": ">=6.0.0",
    "chai": "^3.5.0",
    "enzyme": "^2.3.0",
    "eslint": "^2.13.1",
    "eslint-config-airbnb": "^9.0.1",
    "eslint-plugin-babel": "^3.3.0",
    "eslint-plugin-flow-vars": "^0.4.0",
    "eslint-plugin-flowtype": "^2.2.7",
    "eslint-plugin-import": "^1.9.2",
    "eslint-plugin-jsx-a11y": "^1.5.3",
    "eslint-plugin-react": "^5.2.2",
    "mocha": "^2.5.3",
    "react-dom": "^15.1.0",
    "react-native-debugger-open": "^0.2.2",
    "react-native-mock": "^0.2.3",
    "rnpm-plugin-upgrade": "^0.26.0",
    "sinon": "^1.17.4",
    "sinon-chai": "^2.8.0"
  }
}

and give I just run npm install apollo-client resolve graphql-js to 0.6.0

My <APP_DIR>/.babelrc is simple:

{
  "presets": ["react-native"],
}

My initial thought is that somehow, react-native packager collides with graphql-js babel regenerator-runtime, used to transform arrow function.

There is a lot of possible stuff which can be made outside of this repo to solve the root problem, like maintaining a graphql/language fork, changing apollo-stack build to include a bundled version of graphql ect. But you may have a better solution.

Given that one week or two ago, on react-native 0.24 and graphql 0.6.0, it was working without issue, it may be related to recent react-native change like facebook/react-native@ec5016a (cc @bestander @benjamn).

[bestander]

As for facebook/react-native@ec5016a - I just complied with the new API of regenerator dependency.
Sorry but I don't have any more context on this.

Going forward I hope we could precompile ES6 code before publishing react-native to npm, we'll be sharing 2016 H2 plans in a few weeks

[tychota]

One solution (maybe over complicated) will be to split graphql-js into smaller package, and build a version of the parser (which aim's to be used client side too) in plain ES5 without babel modules that that can collides with packager.

What do you think @leebyron ?

[stubailo]

In the meanwhile we have removed the dependency on graphql in Apollo Client by publishing a pre-bundled version of the parser and printer: apollographql/apollo-client#357

You can use this yourself if you run into the problem via this package: https://github.com/apollostack/graphql-tag

[tychota]

Yep : I migrated my stuff to use this hack.
If needed I may help to split graphql and graphql-parser

[stubailo]

Lol, maybe we can remove all of the hacks we put in yesterday :P @abhiaiyer91 time to celebrate!

[leebyron]

A version with this fix in is heading to npm as v0.6.1 right now