Dramatically simplify your React code

Okay, something does not work here.

I tried to setup the most simple variant possible, with only an App component being rendered, everything else defined as in your thread on how to setup with Meteor.

What I’m seeing is nothing, with an error message in the console that ``‘App’ is undefined```

Edit: Seems to be an issue with Windows 10 installations of Meteor. When I’m doing the exact same steps under the Ubuntu on Windows subsystem, it works. :rolling_eyes:

For whatever reason it didn’t install the plugin when I ran npm install. I had to install it explicitly with npm i --save-dev viewmodel-react-plugin. Then it worked for me on Windows.

1 Like

Tracker is already implemented in NPM. https://www.npmjs.com/package/trackr I’ve used it, it’s pretty solid.

Okay, I’ve run into another problem - I’m trying to use ReactRouter.

However, whenever I try to use the <Link> tag, I’m getting the warning that there’s an unknown prop ‘parent’ on the <a> tag (which is created by <Link>). If I’m using <a> on its own this warning does not appear.

I’m talking about this message here: https://facebook.github.io/react/warnings/unknown-prop.html

If I inspect the generated code I’m seeing this:

        function render() {                                                                                 //
            return React.createElement(                                                                     //
                'div',                                                                                      // 14
                null,                                                                                       // 14
                React.createElement(Link, {                                                                 // 15
                    parent: this,                                                                           // 15
                    to: '/' })                                                                              // 15
            );                                                                                              // 14
        }                                                                                                   //
        return render;                                                                                      //
    }();    

compared to a “pure” hyperlink:

App.prototype.render = function () {                                                                    //
        function render() {                                                                                 //
            return React.createElement(                                                                     //
                'div',                                                                                      // 14
                null,                                                                                       // 14
                React.createElement('a', { href: '/' })                                                     // 15
            );                                                                                              // 14
        }                                                                                                   //
                                                                                                            //
        return render;                                                                                      //
    }();   

Seems like a bug. Please make a repro.

Clone this repo:

There’s a bit more files, but aside from client/main.js, client/main.html and imports/App.js nothing is actually used yet.

Update viewmodel-react-plugin@0.7.6

Thanks for the heads up.

1 Like

Sorry, but that didn’t quite solve it - still getting the same warning message.

Sorry about that. I tested it with a simplified version, not your full one. Pick up viewmodel-react@0.7.7 and viewmodel-react-plugin@0.7.7

1 Like

I hate to tell you this but I’m still seeing the warning. I made doubly sure that I have the proper versions.

Do a meteor reset and try again. I just cloned the project, npm install, and meteor. Everything looks okay.

Yes, indeed. The meteor reset was the missing ingredient :slight_smile:

Just a little update: The binding method you outline does not work with custom attributes and some of the more ordinary standard ones.

For example, this will not work:

<img b="src: pathToImage" />

while the normal

<img src={this.pathToImage()} />

yields the expected result. The binding method simply fails silently.

When I try to do your Dialoh example exactly as you outline it, it fails with an error:

SCRIPT438: Object doesn't support property or method 'addEventListener'
modules.js (26576,5)

You need to specify which attributes you want to use as bindings in the babel configuration:

{
  "presets": ["es2015", "react"],
  "plugins": [
    ["viewmodel-react-plugin", {
      "attributes": [ "title", "placeholder" ]
    }]
  ]
}

See: https://viewmodel.org/#BasicsAttributes

1 Like

That’s halfway there :wink:

It’s solving the problem for the standard DOM attributes. But the Dialog component will still throw the ````Object does not support property or method``` error

Make a repro.

(needmorechars)

import Dialog from 'material-ui/Dialog';
import FlatButton from 'material-ui/FlatButton';

const customContentStyle = {
  width: '80%',
  maxWidth: 'none',
};

Zusaetze({
    open: true,
    titleTest: 'titleTest',
    imagePath: '/static/404.png',
    handlePrevious() {
    },
    handleNext() {
    },
    actions() {
        const actions = [
            <FlatButton label='Cancel' 
            primary={true} onTouchTap={this.handlePrevious} />,
            <FlatButton label='Next'
            primary={true} onTouchTap={this.handleNext} />,
        ];
        return actions;
    },
    render(){
        <div>
            <Dialog
                actions={this.actions()}
                b="title: titleTest"
                modal={true}
                contentStyle={customContentStyle}
                open={this.open()}>
                <div>
                        <img b="src: imagePath" width="300" height="150" />
                    </div>
            </Dialog>
        </div>
    }
})

I need a repro for this. Fork or clone the viewmodel-react-starter and add the absolute bare minimum to reproduce the error (no images, styles, actions, events, etc.) Hopefully it will look something like this:

import Dialog from 'material-ui/Dialog';

Zusaetze({
    titleTest: 'titleTest',
    render(){
        <div>
            <Dialog
                b="title: titleTest">
            </Dialog>
        </div>
    }
})

Sorry, don’t have the time to build and install the proper version of Node just so I can run your repo (because the Node version from Ubuntu 14.04 packages runs into a module error with your plugin).

The code above is the one which throws an error.

Then create an empty project however you normally do it. I need a way to reproduce the problem so I can examine the issue. I can’t just copy/paste that piece of code.