Unexpected character '#'

[bramdevries]

Giving this a test-drive and am getting blocked by the following error:

>> Error: Parsing file node_modules/reactcss/src/reactcss.coffee: Unexpected character '#' (10:0)

Here's the code I'm using (compiled with Browserify and Babel, using NPM3):

import ReactCSS from 'reactcss';

export default class SideMenu extends ReactCSS.Component {
    render() {
        return (
            <div />
        );
    }
};

Not sure what I'm doing wrong? Maybe it's something to do with NPM3?

[casesandberg]

Hey, really sorry about that @bramdevries, I had the package.json pointing to the .coffee files instead of the compiled .js ones. If you go ahead and update reactcss to 0.3.1 on NPM that should solve the issue!

[bramdevries]

Just updated to 0.3.1 and now I get the following:

>> Error: Cannot find module '../src/check-class-structure' from 'node_modules/reactcss/lib'

Seems like it's going wrong here: https://github.com/casesandberg/reactcss/blob/master/src/inline.coffee#L4

[casesandberg]

Hey @bramdevries, There was a legacy require in there, it should be fixed now if you update to 0.3.2

abdd96d

[bramdevries]

Hmm it's solved the compile errors, but now I'm getting runtime errors:

import ReactCSS from 'reactcss';

export default class SideMenu extends ReactCSS.Component {

    classes() {
        return {
            'default': {
                sidemenu: {
                    background: 'red'
                }
            }
        }
    }

    render() {
        return (
            <div is='sidemenu' />
        );
    }
};

Gives this error:

Uncaught ReferenceError: React is not defined

[casesandberg]

Does adding this make it work?

import React from 'react';

Or are you not importing react where you are rendering it?

[bramdevries]

Okay so doing this worked:

import React from 'react/addons';
import ReactCSS from 'reactcss';

export default class SideMenu extends ReactCSS.Component {

    classes() {
        return {
            'default': {
                sidemenu: {
                    background: 'red'
                }
            }
        }
    }

    render() {
        return (
            <div style={this.styles().sidemenu}>
                <p>Test</p>
            </div>
        );
    }
};

The documentation doesn't mention having to import both React and ReactCSS, I assumed ReactCSS replaced React

[casesandberg]

You are totally right, that is my bad. I will update that now!

Thanks for working through this with me