Fix production builds for the material-ui example (#1906)

Also remove redundant getMuiTheme() calls, handle injectTapEventPlugin()
better and use process.browser.

examples/with-material-ui/next.config.js

@@ -0,0 +1,11 @@
+module.exports = {
+  webpack: (config) => {
+    // Remove minifed react aliases for material-ui so production builds work
+    if (config.resolve.alias) {
+      delete config.resolve.alias.react
+      delete config.resolve.alias['react-dom']
+    }
+
+    return config
+  }
+}

examples/with-material-ui/package.json

@@ -1,6 +1,6 @@
 {
   "dependencies": {
-    "material-ui": "^0.17.4",
+    "material-ui": "^0.18.0",
     "next": "latest",
     "react": "^15.5.4",
     "react-dom": "^15.5.4",

examples/with-material-ui/pages/index.js

@@ -7,14 +7,11 @@ import getMuiTheme from 'material-ui/styles/getMuiTheme'
 import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider'
 import injectTapEventPlugin from 'react-tap-event-plugin'
 
-// Needed for onTouchTap
+// Make sure react-tap-event-plugin only gets injected once
-// http://stackoverflow.com/a/34015469/988941
+// Needed for material-ui
-try {
+if (!process.tapEventInjected) {
-  if (typeof window !== 'undefined') {
+  injectTapEventPlugin()
-    injectTapEventPlugin()
+  process.tapEventInjected = true
-  }
-} catch (e) {
-  // do nothing
 }
 
 const styles = {
@@ -24,17 +21,23 @@ const styles = {
   }
 }
 
-const _muiTheme = getMuiTheme({
+const muiTheme = {
   palette: {
     accent1Color: deepOrange500
   }
-})
+}
 
 class Main extends Component {
   static getInitialProps ({ req }) {
-    const userAgent = req ? req.headers['user-agent'] : navigator.userAgent
+    // Ensures material-ui renders the correct css prefixes server-side
-    const isServer = !!req
+    let userAgent
-    return {isServer, userAgent}
+    if (process.browser) {
+      userAgent = navigator.userAgent
+    } else {
+      userAgent = req.headers['user-agent']
+    }
+
+    return { userAgent }
   }
 
   constructor (props, context) {
@@ -58,6 +61,8 @@ class Main extends Component {
   }
 
   render () {
+    const { userAgent } = this.props
+
     const standardActions = (
       <FlatButton
         label='Ok'
@@ -66,12 +71,8 @@ class Main extends Component {
       />
     )
 
-    const { userAgent } = this.props
-    /* https://github.com/callemall/material-ui/issues/3336 */
-    const muiTheme = getMuiTheme(getMuiTheme({userAgent: userAgent}), _muiTheme)
-
     return (
-      <MuiThemeProvider muiTheme={muiTheme}>
+      <MuiThemeProvider muiTheme={getMuiTheme({userAgent, ...muiTheme})}>
         <div style={styles.container}>
           <Dialog
             open={this.state.open}