Search code examples
react-nativebabeljsrelayjs

This is no longer bound when using arrow functions after upgrading to React Native 26

In my project this is no longer bound when using arrow functions after upgrading to React Native 26.

If I don't use a .babelrc in the example below it works with arrow functions. When a .babelrc is added arrow functions no longer work.

.babelrc

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

I also tried:

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

{ "passPerPreset": true, "presets": [ {"plugins":["../schema/babelRelayPlugin"]}, "react-native", {"plugins":["transform-es2015-arrow-functions"]}, ] }

This errors

class NoArrow extends Component {
  constructor(){
    super();
    this.state={x:0};
  }

  inc = ()=>{
    this.setState({x:this.state.x+1});
  }
  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.welcome} onPress={this.inc}>
          Welcome to React Native! {this.state.x}
        </Text>

      </View>
    );
  }
}

enter image description here

This works

class NoArrow extends Component {
  constructor(){
    super();
    this.state={x:0};
    this.inc=this.inc.bind(this);
  }

  inc(){
    this.setState({x:this.state.x+1});
  }
  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.welcome} onPress={this.inc}>
          Welcome to React Native! {this.state.x}
        </Text>

      </View>
    );
  }
}

When adding/removing .babelrc also run:

  • watchman watch-del-all
  • npm start --reset-cache
  • I also edit the file (adding a comment) to make sure it recompiles.

Side note: funny thing is this works even with the .babelrc

class NoArrow extends Component {
  constructor(){
    super();
    this.state={x:0};
  }

  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.welcome} onPress={()=> this.setState({x:this.state.x+1})}>
          Welcome to React Native! {this.state.x}
        </Text>

      </View>
    );
  }
}

Update 1

Inside $TMPDIR delete the cached file; it has a hashed name like 11acb28f1c8d3c6313ca5f8ccba3c158

Using react-native-stage-0 might have fixed the arrow function issue, but now Relay.QL are no longer compiled correctly.

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

enter image description here

Solution

  • I had this problem, but I'm pretty sure it predated RN 0.24. What version of babel-core/babel-cli do you have? I had been hopeful that T7191 would fixed the problem, but it did not.

    What I ended up doing was using babel-relay-plugin-loader. I no longer use passPerPreset anymore, and it has been working reliably, though I don't completely understand how.

    Here is what my .babelrc looks like now:

    {
"presets": [
    "react-native"
],
"plugins": [
    "babel-relay-plugin-loader"
],
"env": {
    "web": {
        "presets": ["es2015", "stage-0", "react"],
        "plugins": ["babel-relay-plugin-loader"]
    }
}
}