diff --git a/examples/with-material-ui/next.config.js b/examples/with-material-ui/next.config.js new file mode 100644 index 00000000..1270adda --- /dev/null +++ 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 index 9e85ca34..33477cd8 100644 --- 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 index dea32fed..e2ffa6d9 100644 --- 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 = ( ) - const { userAgent } = this.props - /* https://github.com/callemall/material-ui/issues/3336 */ - const muiTheme = getMuiTheme(getMuiTheme({userAgent: userAgent}), _muiTheme) - return ( - +