Material-ui: @material-ui/core incompatible with next.js

[jaycenhorton]

• [x] This is not a v0.x issue.
• [x] I have searched the issues of this repository and believe that this is not a duplicate.

---

When using next.js versions >= 8.0.5-canary.11 I am not able to use certain components of @material-ui/[email protected]. If I downgrade to @material-ui/[email protected] there is no issue.

On the flip side, I can use next.js versions <= 8.0.5-canary.10 with @material-ui/[email protected] (and proabably any other version)

The issue appears to only happen when I import and use a ListItem, though It's possible others have the same issue.

this seems to be the same issue but was closed

Additional notes:

• The changes that happened between [email protected] and 11 don't look like they could possibly be causing this issue. ( https://github.com/zeit/next.js/pull/6896, https://github.com/zeit/next.js/pull/6892 )

• everything works in development, it only breaks in production

Expected Behavior 🤔

I should be able to build and start an app using a <ListItem> import and use the latest versions of next.js when using material-ui

Current Behavior 😯

I get a 500 error with the following output in the console:

TypeError: Cannot read property 'dense' of undefined                                                                                                                                                                                              
    at Object.children (/home/ubuntu/dev/mui-next/node_modules/@material-ui/core/ListItem/MergeListContext.js:27:31)                                                                                                                              
    at a.render (/home/ubuntu/dev/mui-next/node_modules/react-dom/cjs/react-dom-server.node.production.min.js:44:64)
    at a.read (/home/ubuntu/dev/mui-next/node_modules/react-dom/cjs/react-dom-server.node.production.min.js:41:58)
    at renderToString (/home/ubuntu/dev/mui-next/node_modules/react-dom/cjs/react-dom-server.node.production.min.js:53:83)
    at render (/home/ubuntu/dev/mui-next/node_modules/next-server/dist/server/render.js:83:16)
    at renderPage (/home/ubuntu/dev/mui-next/node_modules/next-server/dist/server/render.js:201:20)
    at Function.value (/home/ubuntu/dev/mui-next/.next/server/static/NF5o8EJCIiIS3Bbj1tDFL/pages/_document.js:808:41)
    at Object.loadGetInitialProps (/home/ubuntu/dev/mui-next/node_modules/next-server/dist/lib/utils.js:42:35)
    at Object.renderToHTML (/home/ubuntu/dev/mui-next/node_modules/next-server/dist/server/render.js:207:36)
    at process._tickCallback (internal/process/next_tick.js:68:7)

Steps to Reproduce 🕹

Link: https://codesandbox.io/s/nrnx4p6q4p

repo: https://github.com/jaycenhorton/next-mui-errors

Context 🔦

Your Environment 🌎

| Tech | Version |
|--------------|---------|
| Material-UI | ^ v3.9.3 |
| React | 16.8.6 |
| next | ^ 8.0.5-canary.11 |

[joshwooding]

Is this issue present using the 4.0.0 alphas?

[oliviertassinari]

@jaycenhorton It shouldn't be an issue with Material-UI the list context has a default value: {}. The problem is fixed in v4.0.0-alpha.8. I can't explain what's wrong in v3 😱.

[oliviertassinari]

It seems to be a regression on Next.js side. next 8.0.4 works, next 8.1.0 doesn't.

[oliviertassinari]

Let's track it in https://github.com/zeit/next.js/issues/7167.

[samuelkurdz]

Please, I am confused as to how to solve this problem "TypeError: Cannot read property 'dense' of undefined" in my code. I did not get how you guys solved it. It still occured in my code this morning

[oliviertassinari]

@samuelkurdz I believe you need to revert back to v8.0.4: https://github.com/zeit/next.js/releases/tag/v8.0.4.