[SOLVED] ES6 With mixins: [ReactMeteorData]

help
1

How to use mixins: [ReactMeteorData] with ES6?

import React from 'react';

export default class App extends React.Component {
  
  mixins: [ReactMeteorData], // Unexpected token

  render() {

  ...

}

How to use this mixin? I know it works with ES5 but not for ES6+

Edited:

Will mixins be supported in the new js? This makes me now wonder if true.

1 Like
2

You should use React.createClass(), not ES6 classes, if you want to use ReactMeteorData (and trust me, you do). There’s no compelling reason to make your React components via classes.

3 Likes
3

I was just thinking the same. I thought that’s where the meteor and js eco was heading.

4

You could just grab the code for the ReactMeteorData mixin and throw it into your project and hack it in. There are other hacks out there, but personally I’d avoid the headache.

5

I’ll have a fiddle but I hate headaches too :wink:

6

I use it like that:

import ReactMixin from ‘react-mixin’;

@ReactMixin.decorate(ReactMeteorData)
export default class App extends Component {

getMeteorData() { }
…
}

7

@thsering

While processing files with ecmascript (for target web.browser):
client/components/App/App.jsx:4: /client/components/App/App.jsx: Unexpected token (4:0)

ReactMeteorData is installed with meteor add …

Line 4 is @ReactMixin.decorate(ReactMeteorData)

8

Do you use NPM packages? Think that React-Mixin is missing…

9

npm install react-mixin --save ? Yes

This one: https://www.npmjs.com/package/react-mixin ?

10

It’s the right package, yes. How you include it depends on your project really.
With MeteorHacks:NPM for instance. Unless you’re already using Meteor 1.3

11

:sweat_smile: Yeaaaaa 1.3

12

Cool. Haven’t touched it yet but I guess you just use npm install and are ready to go. It’s just a guess though :grinning:

13

Thanks. I’ll blame 1.3 but not a huge deal.

I’ll just use this method for now but that means I’d have to do this for every route

14

Haha…no don’t blame Meteor. It’s my fault - noob and all that. So, decorators won’t work in ES6 (it’s ES7). You’d have to use the mixin differently. Try:

reactMixin.class(App, ReactMeteorData)

15

like so:

import React from 'react';
import reactMixin from 'react-mixin';

reactMixin.class(App, ReactMeteorData)
export default class App extends React.Component {

...
16

I’d think so…gonna test it myself now :slight_smile:

17

Uncaught TypeError: _reactMixin2.default.class is not a function

18

import React from ‘react’;
import reactMixin from ‘react-mixin’;

reactMixin.class(App, ReactMeteorData)
export default class App extends React.Component {
…
}

Right. Saw that too. So put that mixin below your component and change the line to:

reactMixin(App.prototype, ReactMeteorData);

2 Likes
19

Sweet! Thanks! Works.

20

It always does in the end :slight_smile:

1 Like