Possible incompatibility with material-ui

Photoshop UXP Plugin API
,
1

Hello,

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 a browser directly. This implies that it’s a problem with the UXP implementation.

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 implemented. Can someone please take a look at this or tell me how to work around it?

Thank you for your time!

2

UXP is not a browser. There is an incompatibility in many modules. E.g. I am unable to use the rich text editor in UXP.

3

Yep. I never said it was a browser.

4

Material UI has not been tested with UXP, and would be unlikely to work well with the limited CSS support. The “UXP is not a browser” part is intended to refer to to the fact that UXP is much more limited than a browser and does not have a full DOM/CSSOM implementation – as such most UI frameworks will not work out of the box.

You might be able to tweak it to get it to work. The UXP CSSOM is sufficient for React and some basic CSS webpack handling, but that’s probably not far enough for Material.

When it comes to UI frameworks, you can assume that they will not work (rather than that they will).

5

Thank you Kerri. Do you know if there will be any future support for the problem described above?