'concurrentFeatures' breaks environment detect logic in @emotion/cache

What version of Next.js are you using?

12.0.4

What version of Node.js are you using?

15.4.0

What browser are you using?

Chrome

What operating system are you using?

macOS

How are you deploying your application?

next dev

Describe the Bug

Stack

Exception: webpack://_N_E/./node_modules/@emotion/cache/dist/emotion-cache.browser.esm.js?:216
    var ssrStyles = document.querySelectorAll("style[data-emotion]:not([data-s])"); // get SSRed styles out of the way of React's hydration
                    ^

ReferenceError: document is not defined
  at createCache (webpack://_N_E/./node_modules/@emotion/cache/dist/emotion-cache.browser.esm.js?:216:21)
    at eval (webpack://_N_E/./node_modules/@mui/material/node_modules/@mui/styled-engine/StyledEngineProvider/StyledEngineProvider.js?:19:73)
    at Module../node_modules/@mui/material/node_modules/@mui/styled-engine/StyledEngineProvider/StyledEngineProvider.js (/Project/.next/server/pages/index.js:5857:1)
    at __webpack_require__ (/Project/.next/server/middleware-ssr-runtime.js:37:33)
    at fn (/Project/.next/server/middleware-ssr-runtime.js:288:21)
    at eval (webpack://_N_E/./node_modules/@mui/material/node_modules/@mui/styled-engine/StyledEngineProvider/index.js?:5:79)
    at Module../node_modules/@mui/material/node_modules/@mui/styled-engine/StyledEngineProvider/index.js (/Project/.next/server/pages/index.js:5868:1)
    at __webpack_require__ (/Project/.next/server/middleware-ssr-runtime.js:37:33)
    at fn (/Project/.next/server/middleware-ssr-runtime.js:288:21)
    at eval (webpack://_N_E/./node_modules/@mui/material/node_modules/@mui/styled-engine/index.js?:12:79)

Possible Reason

@emotion/cache uses two logics to solve SSR problem. First is using typeof document: https://github.com/emotion-js/emotion/blob/57be9e8cb20313bd2ed297a39c41ca0f0ca37ea8/packages/cache/src/index.js#L23

Another is using browser field in package.json, it will hint build tools to use specific build for browser, in which the first logic is removed, assuming it will only be used in browser. https://github.com/emotion-js/emotion/blob/57be9e8cb20313bd2ed297a39c41ca0f0ca37ea8/packages/cache/package.json#L7-L10

These logics make this package works well with Next.js, but when concurrentFeatures:true, Next.js will load the build for browser, which did not include the first logic, and then cause ReferenceError while calling DOM API.

Expected Behavior

IMO Nextjs should follow load hints since Package Authors may make assumption like @emotion/cache does.

To Reproduce

this bug happened when I tried to turn concurrentFeatures on with @mui/material@5.1.1 https://codesandbox.io/s/nextjs-concurrent-bug-m0fg7

[Andarist]

As to the status for Emotion - we have a PR open to generate package.json#exports in our build tool: https://github.com/preconstruct/preconstruct/pull/435 , once this lands we should be able to include those in Emotion builds and hopefully that should help with the issue. There are still some unknowns to be figured out though.

[MDrooker]

Wondering where this issue is- Still a blocker for moving to React18 and MUI5 with Next