Learnapollo + Meteor or how to deal with the ES7 and ES6 issues

Hey,

I was pretty excited when “learnapollo.com” was released, but the excitement died a fast and painful death.

It was a horror trip to make this simple react tutorial run in meteor… and the trip has no end, since I crash into the wall with each exercise.

If I understand this right, the tutorial is written using the latest ES7 specification, but Meteor supports ES6 only? So many points in this tutorial have to be adjusted to make meteor understand the syntax…

I managed to do so with some points, but since I am a very beginner in the Meteor + React world, I have massive struggles to deal with all the points. So is there a way to use ES7 in meteor?

Points like the following are causing “Missing class properties transform.” errors:


static propTypes = {
    data: React.PropTypes.shape({
      loading: React.PropTypes.bool,
      error: React.PropTypes.object,
      Pokemon: React.PropTypes.object,
    }).isRequired,
    router: React.PropTypes.object.isRequired,
    params: React.PropTypes.object.isRequired,
  }

solution, do not use static propTypes at all.

 goBack = () => {
    this.props.router.replace('/')
  }

solution: do not use arrow functions use following instead

constructor(props) {
        super(props);
        this.goBack = this.goBack.bind(this);

    }
  goBack() {
        {
            this.props.router.replace('/')
        }

    }

But how to deal with the following if I am not allowed to use static?

static fragments = {
    pokemon: gql`
      fragment PokemonCardPokemon on Pokemon {
        url
        name
      }
    `
  }

Hey, I’m sorry you ran into difficulties with the tutorial. First and foremost - learnapollo.com isn’t written by the creators of Apollo, but I did proofread it and missed this point. Having said that:

You can turn on this transform in Meteor by adding a .babelrc to your project with the right transform: https://babeljs.io/docs/plugins/transform-class-properties/

{
  "plugins": ["transform-class-properties"]
}

If you want to do the same without the transform, it looks a bit like this:

class MyComponent { ... }

// Attach property to the class directly
MyComponent.fragments = { ... };

Thanks for asking this question, I’ll see if we can change the tutorial or add the static transform by default in Meteor.

By the way, here’s one relevant issue I found on Meteor: https://github.com/meteor/meteor/issues/6096

Actually it seems reasonable that the transform is not on by default because the syntax has changed dramatically in the last 6 months. But maybe now is the right time to have it on.

Thank you for the fast support.

So I need to install Class properties transform with the command:
meteor npm install --save-dev babel-plugin-transform-class-properties

and then add a .babelrc file to my project directory with the content:

{
  "plugins": ["transform-class-properties"]
}

Am I missing something? It did not work out for me…

The answer is:

do not add a .babelrc file to your project.

Edit your package.json and add there the following:

  "babel": {
    "plugins": ["transform-class-properties"]

  }

Thank you, it transforms now :slight_smile:

That’s surprising - I literally just did the .babelrc thing and it worked for me. Perhaps the file was in the wrong place? Although package.json is also a fine way to do it.

By the way, I opened an issue on Learn Apollo:

Let me know if you run into anything else similar.