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

I just hit this issue myself and had to figure it out.

In my case, this was an issue with Yarn 1 which produced a broken node_modules layout when running yarn on top of existing node_modules. A fresh install created a valid layout and fixed the issue. The solution was to redeploy my Vercel builds without the build cache. This is as simple as clicking the Redeploy button on the failed build’s page: https://vercel.com/docs/concepts/deployments/troubleshoot-a-build#managing-build-cache

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.

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.

For me, redploying it did it. (There were no issues on the local env)

Hello @srmagura,

Thanks for answering.

If I knew what’s different in vercel pipeline, It would be simpler. 😉 But they do not provide a lot of information.

The only thing they show is that they use yarn v1.22.17 (for myself, I’m using currently yarn v1.22.18).

When I do npm list @emotion/utils (locally), I get:

├─┬ @emotion/react@11.8.2
│ ├─┬ @emotion/cache@11.7.1
│ │ └── @emotion/utils@1.1.0 deduped
│ ├─┬ @emotion/serialize@1.0.2
│ │ └── @emotion/utils@1.1.0 deduped
│ └── @emotion/utils@1.1.0
└─┬ @emotion/styled@11.8.1
  └── @emotion/utils@1.1.0 deduped

If I do yarn why @emotion/utils, I get roughly the same information:

=> Found "@emotion/utils@1.1.0"
info Reasons this module exists
   - "@emotion#react" depends on it
   - Hoisted from "@emotion#react#@emotion#utils"
   - Hoisted from "@emotion#styled#@emotion#utils"
   - Hoisted from "@emotion#react#@emotion#cache#@emotion#utils"
   - Hoisted from "@emotion#react#@emotion#serialize#@emotion#utils"

Which does not help me much. But I’ve checked locally in my node_modules, I do have a single @emotion/utils (no sub-node_modules in related packages that contain duplicated)

I have changed some stuff in my project and I get more information in the build logs :

warn  - Compiled with warnings
--
23:12:36.017 |  
23:12:36.017 | ./node_modules/@emotion/styled/base/dist/emotion-styled-base.browser.esm.js
23:12:36.017 | Attempted import error: 'registerStyles' is not exported from '@emotion/utils' (imported as 'registerStyles').
23:12:36.017 |  
23:12:36.017 | Import trace for requested module:
23:12:36.017 | ./node_modules/@emotion/styled/dist/emotion-styled.browser.esm.js
23:12:36.017 | ./node_modules/@chakra-ui/system/dist/chakra-ui-system.esm.js
23:12:36.017 | ./node_modules/@chakra-ui/react/dist/chakra-ui-react.esm.js
23:12:36.017 | ./src/pages/_app.tsx

And after (when vercel tries to build my pages):

TypeError: utils.registerStyles is not a function
--
23:12:38.880 | at Insertion (/vercel/path0/node_modules/@emotion/styled/base/dist/emotion-styled-base.cjs.prod.js:56:9)
23:12:38.880 | at d (/vercel/path0/node_modules/react-dom/cjs/react-dom-server.node.production.min.js:33:498)
23:12:38.880 | at bb (/vercel/path0/node_modules/react-dom/cjs/react-dom-server.node.production.min.js:36:16)
23:12:38.880 | at a.b.render (/vercel/path0/node_modules/react-dom/cjs/react-dom-server.node.production.min.js:42:43)
23:12:38.881 | at a.b.read (/vercel/path0/node_modules/react-dom/cjs/react-dom-server.node.production.min.js:41:83)
23:12:38.881 | at Object.exports.renderToString (/vercel/path0/node_modules/react-dom/cjs/react-dom-server.node.production.min.js:52:138)
23:12:38.881 | at Object.renderPage (/vercel/path0/node_modules/next/dist/server/render.js:765:45)
23:12:38.881 | at Object.defaultGetInitialProps (/vercel/path0/node_modules/next/dist/server/render.js:375:51)
23:12:38.882 | at Function.getInitialProps (/vercel/path0/.next/server/chunks/6859.js:537:20)
23:12:38.882 | at Object.loadGetInitialProps (/vercel/path0/node_modules/next/dist/shared/lib/utils.js:65:29)

Which now stops the build process.

Of course, I’m not able to reproduce it locally, even when I force NODE_ENV=production.

We could see that either with esm or cjs modules, for both .browser or .prod version, the error is there. Which does not make sens because in both the registerStyles function is correctly exported. In fact, in all dist or src files, I found in @emotion.utils: I see a correct export.

So it’s kinda weird.

Tomorrow (it’s late here) I’ll try to create a separated repo for a repro.

Thanks for following.

Cheers