TypeError: Cannot read property 'CSS' of undefined

[liddellj]

Between 0.13.1 and 0.13.2 something changed that breaks my tests (which are using ReactTestUtils.renderIntoDocument) with the error TypeError: Cannot read property 'CSS' of undefined

I'm using jsdom 6.5.1, mocha 2.3.3 and React 0.14.2. Stack trace as follows:

     TypeError: Cannot read property 'CSS' of undefined
      at new Prefixer (node_modules/material-ui/node_modules/inline-style-prefixer/lib/Prefixer.js:43:46)
      at Object.getPrefixer (node_modules/material-ui/lib/styles/auto-prefix.js:28:18)
      at Object.all (node_modules/material-ui/lib/styles/auto-prefix.js:36:17)
      at [object Object].mergeAndPrefix (node_modules/material-ui/lib/utils/styles.js:14:23)
      at [object Object].mergeAndPrefix (node_modules/material-ui/lib/mixins/style-propable.js:27:34)
      at [object Object]._createTableBody (node_modules/material-ui/lib/table/table.js:234:19)
      at [object Object].render (node_modules/material-ui/lib/table/table.js:129:24)
      at [object Object].ReactCompositeComponentMixin._renderValidatedComponentWithoutOwnerOrContext (node_modules/react/lib/ReactCompositeComponent.js:587:34)
      at [object Object].ReactCompositeComponentMixin._renderValidatedComponent (node_modules/react/lib/ReactCompositeComponent.js:607:32)
      at [object Object].wrapper [as _renderValidatedComponent] (node_modules/react/lib/ReactPerf.js:66:21)
      at [object Object].ReactCompositeComponentMixin.mountComponent (node_modules/react/lib/ReactCompositeComponent.js:220:30)
      at [object Object].wrapper [as mountComponent] (node_modules/react/lib/ReactPerf.js:66:21)
      at Object.ReactReconciler.mountComponent (node_modules/react/lib/ReactReconciler.js:37:35)
      at ReactDOMComponent.ReactMultiChild.Mixin.mountChildren (node_modules/react/lib/ReactMultiChild.js:241:44)
      at ReactDOMComponent.Mixin._createContentMarkup (node_modules/react/lib/ReactDOMComponent.js:591:32)
      at ReactDOMComponent.Mixin.mountComponent (node_modules/react/lib/ReactDOMComponent.js:479:29)
      at Object.ReactReconciler.mountComponent (node_modules/react/lib/ReactReconciler.js:37:35)
      at [object Object].ReactCompositeComponentMixin.mountComponent (node_modules/react/lib/ReactCompositeComponent.js:225:34)
      at [object Object].wrapper [as mountComponent] (node_modules/react/lib/ReactPerf.js:66:21)
      at Object.ReactReconciler.mountComponent (node_modules/react/lib/ReactReconciler.js:37:35)
      at [object Object].ReactCompositeComponentMixin.mountComponent (node_modules/react/lib/ReactCompositeComponent.js:225:34)
      at [object Object].wrapper [as mountComponent] (node_modules/react/lib/ReactPerf.js:66:21)
      at Object.ReactReconciler.mountComponent (node_modules/react/lib/ReactReconciler.js:37:35)
      at mountComponentIntoNode (node_modules/react/lib/ReactMount.js:266:32)
      at ReactReconcileTransaction.Mixin.perform (node_modules/react/lib/Transaction.js:136:20)
      at batchedMountComponentIntoNode (node_modules/react/lib/ReactMount.js:282:15)
      at ReactDefaultBatchingStrategyTransaction.Mixin.perform (node_modules/react/lib/Transaction.js:136:20)
      at Object.ReactDefaultBatchingStrategy.batchedUpdates (node_modules/react/lib/ReactDefaultBatchingStrategy.js:62:19)
      at Object.batchedUpdates (node_modules/react/lib/ReactUpdates.js:94:20)
      at Object.ReactMount._renderNewRootComponent (node_modules/react/lib/ReactMount.js:476:18)
      at Object.wrapper [as _renderNewRootComponent] (node_modules/react/lib/ReactPerf.js:66:21)
      at Object.ReactMount._renderSubtreeIntoContainer (node_modules/react/lib/ReactMount.js:550:32)
      at Object.ReactMount.render (node_modules/react/lib/ReactMount.js:570:23)
      at Object.wrapper [as render] (node_modules/react/lib/ReactPerf.js:66:21)
      at Object.ReactTestUtils.renderIntoDocument (node_modules/react/lib/ReactTestUtils.js:76:21)
      at Context.<anonymous> (test/unit/components/SpeakerTableSpecs.js:19:27)

[oliviertassinari]

@liddellj Good catch. This line https://github.com/callemall/material-ui/blob/master/src/styles/auto-prefix.js#L13 is not working.

[Plumpernickel]

Is there a temporary fix we can add into the source code right now until the next release is up by any chance?

[poojareddyintuit]

This is an issue from using node v5.0.0. This went away for me when I switched to 4.2.2, so use 4.2.2 with nvm until they release the fix.

[Plumpernickel]

My build's using 4.1.1 and my local machine has 4.2.2 installed, so @poojareddyintuit I'm not sure that I can say the same for myself..

[jaimem88]

I changed to node 4.2.2 and I am still having the same problem.
I went back to v0.13.1 and node v4.2.2 and it is working.

Reading rofrischmann/inline-style-prefixer they suggest assigning a custom UA so I also tried changing line https://github.com/callemall/material-ui/blob/master/src/styles/auto-prefix.js#L13 to

userAgent = 'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_11_0) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/44.0.2403.155 Safari/537.36';

This also works, however I see a lot of warning messages doing this.

[justinmc]

I got the same error while trying to do server side rendering. Using node v4.2.2 and material-ui v0.13.1 does seem to fix it for now.

[Plumpernickel]

@justinmc Rolling back to the 0.13.1 package has fixed things for me as well for now. Many thanks!

[ghost]

@yoavgurevich @justinmc
I was in 0.13.0 and I had the error.
I tried 0.13.1 without ⚠️ success, I do test with this code : https://github.com/Sutat/T411_SeedWarning/tree/ui/bug/css

Dependencies : https://github.com/Sutat/T411_SeedWarning/blob/ui/bug/css/package.json
Components : https://github.com/Sutat/T411_SeedWarning/tree/ui/bug/css/app/frontend/components

This can be my bad because I have this warning :

Material-UI expects the global navigator.userAgent to be defined for server-side rendering.

• I don't know how to set this to be be thread-safe (it speaks about a global variable ?!)

[oliviertassinari]

#2172 is supposed to address this issue.
Be aware that you need to specify the userAgent in the server side. If you don't, the server side will prefix for all browsers, will the client side will just prefix for the visitor browser.

Three improvements could still be made:

• Add what the previous requirement to the doc
• Use the React Context instead of a global variable to propagate the userAgent
• Allow the prefixAll mode in the browser and not only in the server