リモートgraphqlスキーマでbabelRelayPluginとreact-native-configを使用

Question

私の反応するネイティブコードは昨日までうまく動作していましたが、コードをコンパイルしようとしていた現在、この奇妙なエラーが発生しています。続き

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. 

は私が反応し、ネイティブとのリレーを使用していますので、追加する必要があるので、私は私の追加.babelrcファイルです。

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

私はかなりの間これを苦労しています。誰かが助けてくれますか？

また、私は私のpackage.json内のすべてのバベルのdepedenciesを追加しました： -

"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" 
    }, 

Answer 1

あなた.babelrcが間違っています。 pluginsのトップレベルキーを追加する必要がありますが、presetsにネストしないでください。したがって、正しいものは次のとおりです。

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

Answer 2

したがって、私は最終的に何が間違っているかを考え出しました。

react-native-configパッケージを追加して、さまざまな環境（開発と生産）を処理しました。私のリレープラグインでは、スキーマの検証のためにgraphqlを呼び出します。

今、このgraphql APIは、開発と生産のために変更されるように、react-native-configパッケージからフェッチしています。

React-native-configはes2015に完全に基づいているため、インポートが失敗し、リレーのプラグイン後にネイティブプリセットが指定されているため、エラーインポートが予期しない設定になります。

.babelrc

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

babelRelayPlugin.js（問題とコード）

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" 
}; 

だから今、私は直接babelRelayPluginファイル自体にSCHEMAのURLを指定していますため。アーカイブする前にURLを変更する計画を立てます。そのハックが、私は何かを見つけるまで働くべきである。

は、それが誰かの役に立てば幸い:)