Material-ui: [Accordion] Cannot read property 'userAgent' of undefined on SSR

Created on 30 Jan 2019  路  1Comment  路  Source: mui-org/material-ui

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?

bug 馃悰 Accordion good first issue

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?

--- 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.

>All comments

@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.

Was this page helpful?
0 / 5 - 0 ratings

Related issues

anthony-dandrea picture anthony-dandrea  路  3Comments

chris-hinds picture chris-hinds  路  3Comments

ryanflorence picture ryanflorence  路  3Comments

sys13 picture sys13  路  3Comments

ghost picture ghost  路  3Comments