Next.js Example Fails SSR

[Olliebrown]

• The issue is present in the latest release.
• I have searched the issues of this repository and believe that this is not a duplicate.

Current Behavior 😯

When following the instructions for downloading, installing, and running the dev version of the Next.js example in the material-ui/examples folder, the index page fails to compile and throws the error ReferenceError: Element is not defined from inside the react-transition-group module (a direct dependency of @material-ui/styles). This happens as soon as you run npm run dev and try to visit localhost:3000

Full error generated is:

ReferenceError: Element is not defined
    at Object.<anonymous> (/sandbox/node_modules/react-transition-group/cjs/Transition.js:452:44)
    at Module._compile (internal/modules/cjs/loader.js:778:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:789:10)
    at Module.load (internal/modules/cjs/loader.js:653:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:593:12)
    at Function.Module._load (internal/modules/cjs/loader.js:585:3)
    at Module.require (internal/modules/cjs/loader.js:692:17)
    at require (internal/modules/cjs/helpers.js:25:18)
    at Object.<anonymous> (/sandbox/node_modules/react-transition-group/cjs/CSSTransition.js:14:42)
    at Module._compile (internal/modules/cjs/loader.js:778:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:789:10)
    at Module.load (internal/modules/cjs/loader.js:653:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:593:12)
    at Function.Module._load (internal/modules/cjs/loader.js:585:3)
    at Module.require (internal/modules/cjs/loader.js:692:17)
    at require (internal/modules/cjs/helpers.js:25:18)

Expected Behavior 🤔

The example page should render on the server successfully and be delivered to the client.

Steps to Reproduce 🕹

Easy way to reproduce:

• Click the 'code-sandbox' button in the nextjs example readme
• Or, here's the same URL: https://codesandbox.io/s/github/mui-org/material-ui/tree/master/examples/nextjs

It is broken when running in the codesandbox.io example in the same way I observe on my local machine.

Context 🔦

My goal is to get a working Material-UI example in Next.js. So far, I am just trying to get a working example of Next and MUI cooperating.

Your Environment 🌎

Latest everything, just use the code sandbox :-)

[Olliebrown]

Looks like the true source of this is likely the latest version of react-transition-group module. See reactjs/react-transition-group#618

I tried building the latest Gatsby SSR example too and eventually hit the same error (after I added 'react-jss' as a dependency).

[WinmezzZ]

Looks like the true source of this is likely the latest version of react-transition-group module. See reactjs/react-transition-group#618

I tried building the latest Gatsby SSR example too and eventually hit the same error (after I added 'react-jss' as a dependency).

so how to fix it?

[Olliebrown]

No idea what the long term fix is (that's really up to react-transition-group's maintainers). To work around, you need to get rid of the 'Element' variable it is complaining about (it doesn't exist server-side).

Workaround I'm using (from comments on reactjs/react-transition-group#618):

• edit node_modules/react-transition-group/cjs/Transition.js
• Change lines 451 - 453 to this:

  nodeRef: _propTypes.default.shape({
    current: _propTypes.default.instanceOf(typeof Element === 'undefined' ? function(){} : Element)
  }),

This is very manual and a pretty delicate fix as updates to the node modules will wipe out the change.

[eps1lon]

Duplicate of #20924