リアクトネイティブバンドルがあるため失敗しました「見つけることができませんでしたプリセット 『ステージ1』」

Question

私が反応し、ネイティブアプリ上で、次のエラーを取得しています：

error: bundling failed: "TransformError: /Users/codeaway/repos/webGL/node_modules/react-native-webgl/lib/index.js: Couldn't find preset \"stage-1\" relative to directory \"/Users/codeaway/repos/webGL/node_modules/react-native-webgl\""

私が反応し、ネイティブアプリを構築しています、と私は写真にフィルタを実装する必要があるので、私は（私のpackage.jsonから）次のNPMのパッケージを使用する：

"gl-react": "^3.13.0" 
"gl-react-native": "^3.13.0" 
"react-native-webgl": "^0.5.2" 

コードは非常に簡単です。私は実際には、パッケージのドキュメントからサンプルを実行しようとしている：

import React, { Component } from 'react'; 
import { 
    AppRegistry, 
    StyleSheet, 
    Text, 
    View 
} from 'react-native'; 
import { Surface } from "gl-react-native"; 
import { Shaders, Node, GLSL } from "gl-react"; 

const shaders = Shaders.create({ 
    helloGL: { 
// This is our first fragment shader in GLSL language (OpenGL Shading Language) 
// (GLSL code gets compiled and run on the GPU) 
    frag: GLSL` 
precision highp float; 
varying vec2 uv; 
void main() { 
    gl_FragColor = vec4(uv.x, uv.y, 0.5, 1.0); 
} 
` 
// the main() function is called FOR EACH PIXELS 
// the varying uv is a vec2 where x and y respectively varying from 0.0 to 1.0. 
// we set in output the pixel color using the vec4(r,g,b,a) format. 
// see GLSL_ES_Specification_1.0.17 
    } 
}); 

export default class webGL extends Component { 
    render() { 
    return (
     <View> 
     <Surface width={200} height={200}> 
     <Node shader={shaders.helloGL} /> 
     </Surface> 
     </View> 
    ); 
    } 
} 

const styles = StyleSheet.create({ 
    container: { 
    flex: 1, 
    justifyContent: 'center', 
    alignItems: 'center', 
    backgroundColor: '#F5FCFF', 
    }, 
    welcome: { 
    fontSize: 20, 
    textAlign: 'center', 
    margin: 10, 
    }, 
    instructions: { 
    textAlign: 'center', 
    color: '#333333', 
    marginBottom: 5, 
    }, 
}); 

AppRegistry.registerComponent('webGL',() => webGL); 

これはエラーで言及したディレクトリに.bablercである（「/ユーザ/ codeaway /レポ/ WebGLの/ node_modules /反応し、ネイティブ-webgl \ "）：

{ 
    "presets": ["es2015", "stage-1", "react"] 
} 

ここでは何が起こっていますか？

Answer 1

あなたはおそらく（あなたのプロジェクトにバンドルするために使用しているどんなことを思わあなたpackage.json文書

"babel-core": "^6.24.1" 
"babel-preset-stage-1": "^6.24.1" 

に以下のパッケージを追加し、npm install

で、その後それらをインストールする必要がありますWebpack）は、ステージ1のプリセットを持つバーベルを使用します。