using passPerPreset breaks class properties with babel 6.7 (T7274)

[babel-bot]

Issue originally made by Chirag (chirag04)

Bug information

• Babel version: 6.7
• Node version: 5.6.0
• npm version: 3.6.0

Input code

{
  "passPerPreset": true,
  "presets": [
    "react-native"
  ],
}

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 */

import React, {
  AppRegistry,
  Component,
  StyleSheet,
  Text,
  View
} from 'react-native';

class Name extends Component {
  renderName = () => {
    const { name } = this.props;
    return <Text>{name}</Text>
  };

  render() {
    return this.renderName();
  }
};

class aproject extends Component {
  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.welcome}>
          Welcome to React Native!
        </Text>
        <Name name={'chirag'} />
        <Text style={styles.instructions}>
          To get started, edit index.ios.js
        </Text>
        <Text style={styles.instructions}>
          Press Cmd+R to reload,{'\n'}
          Cmd+D or shake for dev menu
        </Text>
      </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('aproject', () => aproject);

Description

Doing a fresh install of react-native and adding .babelrc with passPerPresets breaks class properties. I get error like undefined is not an object evaluating this.props.name.

I can confirm with works fine with babel 6.6.

PS: This is my first issue on babel repo and i'm not sure what the general guidelines are for posting an issue.

[babel-bot]

Comment originally made by @loganfsmyth

I'm not sure there's enough here to go on. Would you be up for trying to reproduce your issue with the Babel CLI commands? From a quick glance, the code seems ok to me.

[babel-bot]

Comment originally made by Chirag (chirag04)

So i just took an update to my react-native setup which seems to install babel 6.7.6 now. I cannot reproduce this error anymore. I wish i could reproduce with Babel CLI. I will try something over the weekend.

[babel-bot]

Comment originally made by Chirag (chirag04)

Just took one more update and seems like babel 6.7.7 broke it again.

[babel-bot]

Comment originally made by @loganfsmyth

Without more to go on, I'm not sure there's much more I can add. I don't know why it would have worked temporarily.

[babel-bot]

Comment originally made by @taion

I have a smaller repro here.

.babelrc:

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

test.js

class Foo {
  static foo = 3;

  foo = () => {
    console.log(this);
  };
}

Output:

$ babel test.js
var _this = this;

class Foo {}

The really weird thing is that if I use stage-0 instead of stage-1, I get what I expect:

$ babel test.js
class Foo {
  constructor() {
    this.foo = () => {
      console.log(this);
    };
  }

}
Foo.foo = 3;

The relevant versions:

├── babel-cli@6.7.7
├── babel-preset-react@6.5.0
├── babel-preset-stage-0@6.5.0
└── babel-preset-stage-1@6.5.0

[babel-bot]

Comment originally made by @taion

The above example is a bit less compelling because it would work correctly if I were to use ["stage-1", "react"]. However, when adding in es2015, things break down badly.

If I use:

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

I end up with a SyntaxError in:

$ babel test.js
SyntaxError: test.js: Missing class properties transform.
  1 | class Foo {
> 2 |   static foo = 3;
    |   ^
  3 |
  4 |   foo = () => {
  5 |     console.log(this);

If I use:

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

I lose the this-binding in the arrow function class property:

$ babel test.js
"use strict";

var _this = undefined;

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

var Foo = function Foo() {
  _classCallCheck(this, Foo);

  this.foo = function () {
    console.log(_this);
  };
};

Foo.foo = 3;

When using stage-0 instead of stage-1, however, for either ordering of the presets, I get the desired:

$ babel test.js
"use strict";

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

var Foo = function Foo() {
  var _this = this;

  _classCallCheck(this, Foo);

  this.foo = function () {
    console.log(_this);
  };
};

Foo.foo = 3;

[babel-bot]

Comment originally made by Chirag (chirag04)

I can confirm taion's repro case. Here's how i could repo this:

class Foo {
    name = 'chirag';
    bar = () => {
        return this.name;
    }
}

console.log(new Foo().bar());

.babelrc

{
  "passPerPreset": true,
  "presets": [ 
    { 
        "plugins": [ 
            'syntax-class-properties',
            'transform-class-properties',
            'transform-es2015-arrow-functions',
            'transform-es2015-block-scoping',
            'transform-es2015-classes'
        ] 
    }
  ]
}

turn passPerPreset to false and it logs my name correctly and undefined when passPerPreset is set to true.

cc @loganfsmyth

[babel-bot]

Comment originally made by @zpao

Just wanted to chime in and say I'm hitting this too in a plugin I ship that uses passPerPreset. You can simplify the @chirag04's test case a bit more and leave out syntax-class-properties & transform-es2015-block-scoping.

[fab1an]

I have this problem too with the simplest config:

.babelrc:

{
    plugins: [
        'babel-plugin-syntax-class-properties'
    ]
}

Input:

class Test {
    onPress = () => {
        console.log(this.id)
    }
}

Output:

var _this = this;

class Test {
    onPress = () => {
        console.log(_this.id);
    };
}

[hzoo]

@fab1an

Ok it's definetely a bug when using syntax-class-properties, but don't you mean to run the transform 'babel-plugin-transform-class-properties'? It won't actually change the class properties otherwise. (It's making the this transform because it runs the internal transform for that)

[fab1an]

I have a plugin that adds class-properties, so I just need the syntax transform. I omitted the second and third preset for clarity.

[sophiebits]

This does sound the same as #4337 which has a more precise description of the problem.

[taion]

BTW, for those of us hitting this issue because of Relay, it's actually not necessary to use passPerPreset for the Relay plugin.

[timothyerwin]

The passPerPreset was breaking the build. I was getting Property name of JSXOpeningElement expected node to be of a type ["JSXIdentifier","JSXMemberExpression"] but instead got "MemberExpression"

I think I added it in to .babelrc because of some Relay example, but removing it seems to work fine so far:

{
  "presets": [
    "node6",
    "es2015",
    {
      "plugins": [
        "./plugins/babelrelayplugin"
      ]
    },
    "react",
    "react-hmre",
    "stage-0"
  ]
}`

[yutin1987]

when passPerPreset is true, will show error as follow on React Native:
Note: The code generator has deoptimised the styling of "/Users/yutin/Develop/bunninn/client/mobile/node_modules/immutable/dist/immutable.js" as it exceeds the max of "100KB"

[hzoo]

@yutin1987 it's just a warning not an error

[yutin1987]

@hzoo Thanks. but will be something memory errors (ex. this.props is not defined) on runtime when have that warning.
and then I remove the passPerPreset, it's work.

[hzoo]

Going to close for inactivity, looks like relay doesn't use/recommend it anymore. Were probably going to deprecate it and change it to be a pass option in each preset rather than a global passPerPreset option anyway