UXP & @material-ui - Uncaught TypeError: Cannot read property 'cssRules' of undefined

New Here ,
Jul 13, 2021 Jul 13, 2021

Copy link to clipboard




While converting an existing CEP app over to UXP we ran into a problem. The existing app heavily relies upon `@material-ui/core` for its layout and components, namely `<Box />`.  The source code for `Box` tries to access `cssRules` on a container, but fails to do so. Here is the complete stacktrace:


VM4694 jss.esm.js:1779 Uncaught TypeError: Cannot read property 'cssRules' of undefined
    at getValidRuleInsertionIndex (VM1195 jss.esm.js:1779)
    at DomRenderer.insertRule (VM1195 jss.esm.js:1926)
    at DomRenderer.insertRules (VM1195 jss.esm.js:1888)
    at DomRenderer.deploy (VM1195 jss.esm.js:1875)
    at StyleSheet.deploy (VM1195 jss.esm.js:1204)
    at StyleSheet.attach (VM1195 jss.esm.js:1083)
    at attach (VM1214 makeStyles.js:134)
    at eval (VM1214 makeStyles.js:250)
    at useSynchronousEffect (VM1214 makeStyles.js:202)
    at useStyles (VM1214 makeStyles.js:242)
getValidRuleInsertionIndex @ VM4694 jss.esm.js:1779
insertRule @ VM4694 jss.esm.js:1926
insertRules @ VM4694 jss.esm.js:1888
deploy @ VM4694 jss.esm.js:1875
deploy @ VM4694 jss.esm.js:1204
attach @ VM4694 jss.esm.js:1083
attach @ VM4713 makeStyles.js:134
eval @ VM4713 makeStyles.js:250
useSynchronousEffect @ VM4713 makeStyles.js:202
useStyles @ VM4713 makeStyles.js:242
StyledComponent @ VM4731 styled.js:99
renderWithHooks @ VM4548 react-dom.development.js:14803
updateForwardRef @ VM4548 react-dom.development.js:16816
beginWork @ VM4548 react-dom.development.js:18645
callCallback @ VM4548 react-dom.development.js:188
(anonymous) @ uxp://uxp-internal/domjs_scripts.js:2
I @ uxp://uxp-internal/domjs_scripts.js:2
(anonymous) @ uxp://uxp-internal/domjs_scripts.js:2
O @ uxp://uxp-internal/domjs_scripts.js:2
dispatchEvent @ uxp://uxp-internal/domjs_scripts.js:2
dispatchEvent @ uxp://uxp-internal/domjs_scripts.js:2
invokeGuardedCallbackDev @ VM4548 react-dom.development.js:237
invokeGuardedCallback @ VM4548 react-dom.development.js:292
beginWork$1 @ VM4548 react-dom.development.js:23203
performUnitOfWork @ VM4548 react-dom.development.js:22157
workLoopSync @ VM4548 react-dom.development.js:22130
performSyncWorkOnRoot @ VM4548 react-dom.development.js:21756
scheduleUpdateOnFiber @ VM4548 react-dom.development.js:21188
updateContainer @ VM4548 react-dom.development.js:24373
eval @ VM4548 react-dom.development.js:24758
unbatchedUpdates @ VM4548 react-dom.development.js:21903
legacyRenderSubtreeIntoContainer @ VM4548 react-dom.development.js:24757
render @ VM4548 react-dom.development.js:24840
create @ VM4558 PanelController.jsx:41
show @ VM4558 PanelController.jsx:51
_dispatchPanelIdEvent @ uxp://uxp-internal/pluginmanager_scripts.js:1
_dispatchPanelEvent @ uxp://uxp-internal/pluginmanager_scripts.js:1
_showPanel @ uxp://uxp-internal/pluginmanager_scripts.js:1
_executeMessage @ uxp://uxp-internal/pluginmanager_scripts.js:1


I do not receive this error message when opening the `index.html` in the browser directly. This implies that it's a problem with the UXP browser implementation. There was a previous bug with Firefox (that was patched a while ago) that caused the same error. Here is a link to it.

Steps to reproduce:
1. Create a UXP plugin using `uxp-photoshop-plugin-samples/ui-react-starter`
2. yarn add `@material-ui/core`
3. import the Box component and use it inside of the `PanelController`. No props necessary... just a plain ol' Box
4. Load and debug the plugin. The error should be visible in the console.

Here's a breakdown of the error -

Material UI is attempting to add css styling rules to an element. While debugging I noted that it is a `style` element. One of the functions in the stacktrace is accepting a container element. If none is given it uses `this.element.sheet`. The value of `sheet` is undefined and this is what it is relying on to apply the CSS rules.

I looked through the docs and known issues, but didn't see anything relating to `sheet` not being implimeneted. Can someone please take a look at this or tell me how to work around it?


Thank you for your time!

Mac, Problem or error







Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
no replies

Have something to add?

Join the conversation