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

Rowno · timneutkens · commit 5c57b43e0a11 · 2017-05-07T15:51:12.000+02:00
Also remove redundant getMuiTheme() calls, handle injectTapEventPlugin()
better and use process.browser.
diff --git a/examples/with-material-ui/next.config.js b/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
+  }
+}
diff --git a/examples/with-material-ui/package.json b/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",
diff --git a/examples/with-material-ui/pages/index.js b/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
-// http://stackoverflow.com/a/34015469/988941
-try {
-  if (typeof window !== 'undefined') {
-    injectTapEventPlugin()
-  }
-} catch (e) {
-  // do nothing
+// Make sure react-tap-event-plugin only gets injected once
+// Needed for material-ui
+if (!process.tapEventInjected) {
+  injectTapEventPlugin()
+  process.tapEventInjected = true
 }
 
 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
-    const isServer = !!req
-    return {isServer, userAgent}
+    // Ensures material-ui renders the correct css prefixes server-side
+    let 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}

Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`{`
`2`	`2`	`"dependencies": {`
`3`		`- "material-ui": "^0.17.4",`
	`3`	`+ "material-ui": "^0.18.0",`
`4`	`4`	`"next": "latest",`
`5`	`5`	`"react": "^15.5.4",`
`6`	`6`	`"react-dom": "^15.5.4",`