React-native bundling failed because of "couldn't find preset 'stage-1'"

Question

I am getting the following error on a react-native app:

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\""

I am building a react-native app, and I need to implement filters on photos, so I want to use the following npm packages (from my package.json):

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

The code is extremely simple; I'm really just trying to run the samples from the package's docs:

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

This is the .bablerc in the directory mentioned in the error ("/Users/codeaway/repos/webGL/node_modules/react-native-webgl\"):

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

What is going on here?

Vlatko Vlahek Vlatko Vlahek · Accepted Answer · 2017-09-12T20:30:04

You need to add the following packages to your package.json document

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

And install them afterwards with npm install.

It seems that whatever you are using for bundling in your project (probably Webpack), uses babel with stage 1 preset.

React-native bundling failed because of "couldn't find preset 'stage-1'"

1 Answers