Next.js: with-material-ui-next

[michaelfriedman]

Example build fails.

TypeError: (0 , _styles.createStyleSheet) is not a function
    at Object.<anonymous> (/xxx/xxxx/xxx/xxx/with-material-ui-next/.next/dist/components/withRoot.js:47:47)
    at Module._compile (module.js:573:30)
    at Object.Module._extensions..js (module.js:584:10)
    at Module.load (module.js:507:32)
    at tryModuleLoad (module.js:470:12)
    at Function.Module._load (module.js:462:3)
    at Module.require (module.js:517:17)
    at require (internal/module.js:11:18)
    at Object.<anonymous> (/xxx/xxx/xxx/xxx/with-material-ui-next/.next/dist/pages/index.js:43:17)
    at Module._compile (module.js:573:30)

When running npm install and npm run dev, app compiles successfully then immediately fails when I land on local host with the above error.

• [ X] I have searched the issues of this repository and believe that this is not a duplicate. This issue was listed, then closed with no comment.

Expected Behavior

Expected app not to fail.

Current Behavior

App fails after landing on local host 3000 with above error message

Steps to Reproduce (for bugs)

1. CD into example directory
2. npm install
3. npm run dev
4. visit localhost:3000

Context

Your Environment

| Tech | Version |
|---------|---------|
| next | ^3.0.3 |
| node | 8.4.0 |
| OS | High Sierra |
| browser | Chrome |
| etc | |

[pencilcheck]

createStyleSheet does not exist in material-ui now. Need update with alternatives.
https://github.com/callemall/material-ui/blob/v1-beta/src/styles/index.js

[pencilcheck]

I found a quick fix:

Remove createStyleSheet import, change from

const styleSheet = createStyleSheet(theme => ({
  '@global': {
    html: {
      background: theme.palette.background.default,
      WebkitFontSmoothing: 'antialiased', // Antialiasing.
      MozOsxFontSmoothing: 'grayscale' // Antialiasing.
    },
    body: {
      margin: 0
    }
  }
}))

to

const styleSheet = theme => ({
  '@global': {
    html: {
      background: theme.palette.background.default,
      WebkitFontSmoothing: 'antialiased', // Antialiasing.
      MozOsxFontSmoothing: 'grayscale' // Antialiasing.
    },
    body: {
      margin: 0
    }
  }
})

[michaelfriedman]

That did the trick. Thanks for the quick help.