1

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

Nick Siderakis
  • 1,961
  • 2
  • 21
  • 39

2 Answers2

3

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"]
    }
}
}
emrosenf
  • 58
  • 7
1

Not sure if this is really related to 26, I had the same issue with 25. See my post here: Broken autobinding in arrow function for referenced node modules when using react-native with react-relay

For me the issue isn't persistent and after tinkering with it for a while it's gone for good. Seemingly the react-native-stage-0 did it for me. When clearing the cache the only thing you didn't do is clear the $TMPDIR like this: rm -rf $TMPDIR/react-*

I've tried to reproduce my issue with a sample project but wasn't able to, I'd try to rm -rf the node_modules as well, just to be sure.

Matthias M.
  • 41
  • 4
  • 1
    Thanks! I upgraded to RN26 from RN24, so it was probably introduced in RN25. Adding react-native-stage-0 fixed arrow functions but from relay. Were you able to get arrow functions and relay working together? Can you post your entire .babrc. – Nick Siderakis May 26 '16 at 13:37
  • Yes, it works: `{ "sourceMaps": "inline", "presets": [ "./plugins/babelRelayPlugin", "react-native-stage-0" ], "passPerPreset": true } ` and here is the babelRelayPlugin: `const getBabelRelayPlugin = require('babel-relay-plugin') const schema = require('../../data/schema.json') module.exports = { plugins: [getBabelRelayPlugin(schema.data, { abortOnError: true })] }; ` – Matthias M. May 27 '16 at 16:34