CODEWITHSUNDEEP
reactjsnpmnpm-install
Andrew
Andrew

Reputation: 141

Module error when styling react components with react-style

I'm interested in using react-style. I am getting errors though when trying to process my files in Gulp. I get the following error:

Error: Cannot find module 'react/lib/ExecutionEnvironment' from '/Users/nnnnnn/Google Drive/Code/reactTesting/reactTestOne/node_modules/react-style/lib'

The jsx file is here, just in case I've done something very silly:

import React, {Component, PropTypes} from 'react';
var ReactDOM = require('react-dom');
var Stylesheet = require('react-style');

export default class ToDo extends React.Component {
    constructor(props){
        super(props);
    }

    componentDidMount() {
        var node = ReactDOM.findDOMNode(this);
        TweenLite.to(node, 0.5, {css:{opacity:1, x:100}, ease:Power4.easeOut});
    }

    render() {
        return (
            <div styles={[styles.todo]} onClick={this.props.onClick} >
                {this.props.text}
            </div>
        )
    }
}

ToDo.propTypes = {
    onClick: PropTypes.func.isRequired,
    text: PropTypes.string.isRequired,
    completed: PropTypes.bool.isRequired
}

var styles = Stylesheet.create({
    todo: {
        opacity: 0,
        x: -100
    }
})

Google is not helping. Wondering if I need to compile the package somehow, quite tired so probably time to leave it for the night. But struggling to let it go until this is done. You know how it is :)

Cheers.

Upvotes: 2

Views: 555

Answers (1)

Andrew
Andrew

Reputation: 141

The answer is a mix between editing the files as shown here:

https://github.com/js-next/react-style/pull/128/files

but in my instance editing:

var hyphenateStyleName = require('fbjs/lib/hyphenateStyleName');

in stylesToCSS.js to:

var hyphenateStyleName = require('react/node_modules/fbjs/lib/hyphenateStyleName');

Upvotes: 1

Related Questions