undefined property going into radium module - related to missing stylesheet?

[alexpmorris]

I keep getting the following error, and I just can't seem to figure out what's causing it.

defineProperty.value
node_modules/react-coverflow/dist/react-coverflow.js:474
  471 | !function(){"use strict";var o=!("undefined"==typeof window||!window.document||!window.document.createElement),i={canUseDOM:o,canUseWorkers:"undefined"!=typeof Worker,canUseEventListeners:o&&!(!window.addEventListener&&!window.attachEvent),canUseViewport:o&&!!window.screen};r=function(){return i}.call(t,n,t,e),!(void 0!==r&&(e.exports=r))}()},/*!******************************************!*\
  472 |   !*** ./~/radium/lib/components/style.js ***!
  473 |   \******************************************/
> 474 | function(e,t,n){"use strict";function r(e){return e&&e.__esModule?e:{"default":e}}Object.defineProperty(t,"__esModule",{value:!0});var o="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol?"symbol":typeof e},i=n(/*! ../css-rule-set-to-string */102),a=r(i),s=n(/*! react */92),u=r(s),l=u["default"].createClass({displayName:"Style",propTypes:{radiumConfig:s.PropTypes.object,rules:s.PropTypes.object,scopeSelector:s.PropTypes.string},contextTypes:{_radiumConfig:s.PropTypes.object},getDefaultProps:function(){return{scopeSelector:""}},_buildStyles:function(e){var t=this,n=this.props.radiumConfig&&this.props.radiumConfig.userAgent||this.context&&this.context._radiumConfig&&this.context._radiumConfig.userAgent,r=this.props.scopeSelector,i=Object.keys(e).reduce(function(t,n){return"object"!==o(e[n])&&(t[n]=e[n]),t},{}),s=Object.keys(i).length?(0,a["default"])(r||"",i,n):"";return s+Object.keys(e).reduce(function(i,s){var u=e[s];if("mediaQueries"===s)i+=t._buildMediaQueryString(u);else if("object"===o(e[s])){var l=r?s.split(",").map(function(e){return r+" "+e.trim()}).join(","):s;i+=(0,a["default"])(l,u,n)}return i},"")},_buildMediaQueryString:function(e){var t=this,n="";return Object.keys(e).forEach(function(r){n+="@media "+r+"{"+t._buildStyles(e[r])+"}"}),n},render:function(){if(!this.props.rules)return null;var e=this._buildStyles(this.props.rules);return u["default"].createElement("style",{dangerouslySetInnerHTML:{__html:e}})}});t["default"]=l,e.exports=t["default"]},/*!***********************************************!*\

It seems to be related to a missing stylesheet or something, but according to the README, it seems everything should be included (also made sure css-module was installed too).

The required stylesheet using css-module and include in package(js file), so you don't need include other stylesheet.

For reference, this is my render() (also tried with/without StyleRoot, media, etc):

    render() {
        return (
            <StyleRoot>
                <Coverflow width="960" height="500"
                displayQuantityOfSide={2}
                navigation={true}
                enableHeading={false}
                enableScroll={true}
                clickable={true}
                active={this.state.active}
                media={{
                    '@media (max-width: 900px)': {
                    width: '600px',
                    height: '300px'
                    },
                    '@media (min-width: 900px)': {
                    width: '960px',
                    height: '600px'
                    }
                }}
                >
                <img src='..' alt='title or description' data-action={fn} />
                <img src='..' alt='title or description' data-action="{fn}"/>
                <img src='..' alt='title or description' data-action="{fn}"/>
                </Coverflow>
            </StyleRoot>
        );    
    }

Any assistance or guidance would be much appreciated, thanks!

[asalem1]

@alexpmorris I'm getting the same thing. Any luck? What version of React are you using?

I just updated React and came across the error. After removing react-carousel from my app and packages, the app rendered. I'm going to take a look at it and see if I can find some sort of a solution, would love to hear your progress on the issue

[alexpmorris]

I ended up going another way, but I'm pretty sure it's some incompatibility with the radium library versus the latest version of react v16 versus v15.3 that the project is using, since I was able to get the standalone project up and running fine under the older react version via this repo.

[asalem1]

Same. I'll try and work on updating it soon and make a pull request. No point in letting this issue make it completely useless.

[asalem1]

@alexpmorris v0.2.5 should resolve the issues. LMK if you encounter any problems