Same issue as #2316.
We're seeing the following error in expansion panel on our production servers every few days, in an SSR environment:
TypeError: Cannot read property 'userAgent' of undefined
at Object.<anonymous> (/home/vcap/app/bundle/programs/server/npm/node_modules/@material-ui/core/ExpansionPanel/ExpansionPanel.js:44:78)
at Module._compile (module.js:653:30)
at Object.Module._extensions..js (module.js:664:10)
at Module.load (module.js:566:32)
Using material-ui 3.8.1.
Not sure what causes this to happen, since it's very occasional. Should we simply check if window.navigator is defined?
@Floriferous I could only find two lines using such logic. Interestingly, we don't use the same logic:
https://github.com/mui-org/material-ui/blob/45079440a6151358e69ab23e8e8aeed71cef95ce/packages/material-ui/src/SwipeableDrawer/SwipeableDrawer.js#L494
https://github.com/mui-org/material-ui/blob/45079440a6151358e69ab23e8e8aeed71cef95ce/packages/material-ui/src/ExpansionPanel/ExpansionPanel.js#L14
The worse part is that it's a test only check. I have tried the following change, the results are promising. Do you want to give it a shot?
--- a/packages/material-ui/src/ExpansionPanel/ExpansionPanel.js
+++ b/packages/material-ui/src/ExpansionPanel/ExpansionPanel.js
@@ -9,18 +9,6 @@ import Paper from '../Paper';
import withStyles from '../styles/withStyles';
import { isMuiElement } from '../utils/reactHelpers';
-// Workaround https://github.com/jsdom/jsdom/issues/2026
-const edgeFix =
- typeof window !== 'undefined' && /jsdom/.test(window.navigator.userAgent)
- ? {}
- : {
- // Fix a rendering issue on Edge
- '@supports (-ms-ime-align: auto)': {
- borderBottomLeftRadius: 0,
- borderBottomRightRadius: 0,
- },
- };
-
export const styles = theme => {
const transition = {
duration: theme.transitions.duration.shortest,
@@ -63,7 +51,11 @@ export const styles = theme => {
'&:last-child': {
borderBottomLeftRadius: theme.shape.borderRadius,
borderBottomRightRadius: theme.shape.borderRadius,
- ...edgeFix,
+ // Fix a rendering issue on Edge
+ '@supports (-ms-ime-align: auto)': {
+ borderBottomLeftRadius: 0,
+ borderBottomRightRadius: 0,
+ },
},
},
/* Styles applied to the root element if `expanded={true}`. */
Alternatively, we can use a process.env.NODE_ENV !== 'test' branch logic.
Most helpful comment
@Floriferous I could only find two lines using such logic. Interestingly, we don't use the same logic:
https://github.com/mui-org/material-ui/blob/45079440a6151358e69ab23e8e8aeed71cef95ce/packages/material-ui/src/SwipeableDrawer/SwipeableDrawer.js#L494
https://github.com/mui-org/material-ui/blob/45079440a6151358e69ab23e8e8aeed71cef95ce/packages/material-ui/src/ExpansionPanel/ExpansionPanel.js#L14
The worse part is that it's a test only check. I have tried the following change, the results are promising. Do you want to give it a shot?
Alternatively, we can use a
process.env.NODE_ENV !== 'test'branch logic.