process.browser does not exist

[softshipper]

Hi all

I am trying to implement Swipeable Drawer from Material-UI. For performance reason, I would like to implement

const iOS = process.browser && /iPad|iPhone|iPod/.test(navigator.userAgent);
<SwipeableDrawer disableBackdropTransition={!iOS} disableDiscovery={iOS} />

as recommended on the page.

I have created a component as follows:

const iOS = process.browser && /iPad|iPhone|iPod/.test(navigator.userAgent)
const useStyles = makeStyles((theme: Theme) =>
    createStyles({
        icon: {
            marginLeft: "auto",
            color: "#505050"
        },
    }),
)

export default function MobileNav() {

    const classes = useStyles()

    return (
        <React.Fragment>
            <IconButton
                className={classes.icon}
                color="inherit"
                aria-label="Open navigation"
                edge="end"
            >
                <MenuRoundedIcon fontSize="large"/>
            </IconButton>
        </React.Fragment>
    )
}

and the compiler complains:

Property 'browser' does not exist on type 'Process'.  TS2339

     5 | 
     6 | 
  >  7 | const iOS = process.browser && /iPad|iPhone|iPod/.test(navigator.userAgent)
       |                     ^
     8 | const useStyles = makeStyles((theme: Theme) =>
     9 |     createStyles({
    10 |         icon: {

Material-ui version v4.11.2.

Thanks

[oliviertassinari]

Oh, it looks like we should update the documentation to match what we use in the implementation:

https://github.com/mui-org/material-ui/blob/7be010a15f0637e7446d9129228e953554ba4686/packages/material-ui/src/SwipeableDrawer/SwipeableDrawer.js#L133

Does the alternative work? Do you want to update the documentation?

diff --git a/docs/src/modules/components/AppNavDrawer.js b/docs/src/modules/components/AppNavDrawer.js
index 9d1cbc746e..5b006b1e32 100644
--- a/docs/src/modules/components/AppNavDrawer.js
+++ b/docs/src/modules/components/AppNavDrawer.js
@@ -141,7 +141,7 @@ function reduceChildRoutes(context) {
 // iOS is hosted on high-end devices. We can enable the backdrop transition without
 // dropping frames. The performance will be good enough.
 // So: <SwipeableDrawer disableBackdropTransition={false} />
-const iOS = process.browser && /iPad|iPhone|iPod/.test(navigator.userAgent);
+const iOS = typeof navigator !== 'undefined' && /iPad|iPhone|iPod/.test(navigator.userAgent);

 function AppNavDrawer(props) {
   const { classes, className, disablePermanent, mobileOpen, onClose, onOpen } = props;
diff --git a/docs/src/pages/components/drawers/drawers.md b/docs/src/pages/components/drawers/drawers.md
index 5fa5fd5f79..0275552bf0 100644
--- a/docs/src/pages/components/drawers/drawers.md
+++ b/docs/src/pages/components/drawers/drawers.md
@@ -43,7 +43,7 @@ The following properties are used in this documentation website for optimal usab
   with the discovery feature, so discovery has to be disabled.

 ```jsx
-const iOS = process.browser && /iPad|iPhone|iPod/.test(navigator.userAgent);
+const iOS = typeof navigator !== 'undefined' && /iPad|iPhone|iPod/.test(navigator.userAgent);

 <SwipeableDrawer disableBackdropTransition={!iOS} disableDiscovery={iOS} />;

[softshipper]

It works like a charm. I would love to update the documentation. However, I have a question regarding to:

 const iOS = typeof navigator !== 'undefined' && /iPad|iPhone|iPod/.test(navigator.userAgent); 

Does it work also for JS? Or do I have to differentiate in the documentation?

Thanks a lot

[oliviertassinari]

It works like a charm. I would love to update the documentation.

Feel free to send a pull request then :)

Does it work also for JS?

What do you mean?

[softshipper]

I am using typescript to build my react app. What I mean is, if the code

 const iOS = typeof navigator !== 'undefined' && /iPad|iPhone|iPod/.test(navigator.userAgent)

also works for react JS version?

[oliviertassinari]

Yes

[softshipper]

Thanks.