Vercel build : registerStyles is not a function (not exported from @emotion/utils)

Current behavior:

When our project is pushed on vercel (nextjs project with latest @chakra-ui) : we have a warning. Warning which is visible in the build process (but that does not block the build).

Vercel build logs:

warn  - Compiled with warnings

./node_modules/@emotion/styled/base/dist/emotion-styled-base.browser.esm.js
--
16:18:19.896 | Attempted import error: 'registerStyles' is not exported from '@emotion/utils' (imported as 'registerStyles').

But it throws in the browser :

Browser logs:

build.umd.js:3030 TypeError: (0 , r.registerStyles) is not a function
    at F (_app-b803f9892612ebe33cd7.js:1:73070)
    at ro (/_next/static/chunks/framework-4eeab015d61905b9a9e0.js?__WB_REVISION__=cBOMTQDRP5FizIkE0AzuO:1:60237)
    at Hu (/_next/static/chunks/framework-4eeab015d61905b9a9e0.js?__WB_REVISION__=cBOMTQDRP5FizIkE0AzuO:1:112695)
    at Pi (/_next/static/chunks/framework-4eeab015d61905b9a9e0.js?__WB_REVISION__=cBOMTQDRP5FizIkE0AzuO:1:99869)
    at xi (/_next/static/chunks/framework-4eeab015d61905b9a9e0.js?__WB_REVISION__=cBOMTQDRP5FizIkE0AzuO:1:99797)
    at _i (/_next/static/chunks/framework-4eeab015d61905b9a9e0.js?__WB_REVISION__=cBOMTQDRP5FizIkE0AzuO:1:99660)
    at vi (/_next/static/chunks/framework-4eeab015d61905b9a9e0.js?__WB_REVISION__=cBOMTQDRP5FizIkE0AzuO:1:96626)
    at /_next/static/chunks/framework-4eeab015d61905b9a9e0.js?__WB_REVISION__=cBOMTQDRP5FizIkE0AzuO:1:46005
    at /_next/static/chunks/framework-4eeab015d61905b9a9e0.js?__WB_REVISION__=cBOMTQDRP5FizIkE0AzuO:1:130410
    at Wl (/_next/static/chunks/framework-4eeab015d61905b9a9e0.js?__WB_REVISION__=cBOMTQDRP5FizIkE0AzuO:1:45782)

The page isn’t working:

Application error: a client-side exception has occurred (see the browser console for more information).

We do not have the error locally, even when doing next build.

Related ./node_modules/@emotion/styled/base/dist/emotion-styled-base.browser.esm.js import:

import { getRegisteredStyles, registerStyles, insertStyles } from '@emotion/utils';

Environment information:

"@chakra-ui/react": "^1.8.7",
"@emotion/react": "^11.8.2",
"@emotion/styled": "^11.8.1",
"@emotion/utils": "^1.1.0"
"next": "^12.1.2",
"react": "^17.0.2",
"react-dom": "^17.0.2",
...
"typescript": "^4.6.3"

[Andarist]

From my point of view, this issue looks a lot like an issue with a package manager or a bundler and not with Emotion itself. So I don’t think there is anything actionable on our side to fix this (until proven otherwise). That being said - I’m going to do a release of all packages in a moment, so perhaps once you upgrade everything will magically fix itself.

[jkimber]

Running an install of the offending packages got an otherwise broken build working for me. With resulting duplicates in the yarn.lock, rather than adding the dependencies (as they were already listed as subdependencies elsewhere) - adding resolutions to the package.json worked also:

"resolutions": {
    "@emotion/utils": "^1.1.0",
    "@emotion/sheet": "^1.1.0"
}

As @MCK-Robert-Cowell says above, renderStyles didn’t appear in the version of @emotion/utils that was getting installed / used by default. Forcing it to ^1.1.0 seems to have done the trick.