emotion: @emotion/styled throwing error - Type Error: Cannot read property 'registered' of undefined at node modules emotion-styled-base.cjs.prod.js:131:53

Current behavior:

I have nx monorepo project with nextJS + React and I am using @emotion/react and @emotion/styled in project. Earlier it was working fine but all of a sudden while building the project in argo workflow It is throwing the error related to emotion/styled for all the pages.

Note: In local, build is successful but while building in argo workflow I am facing this issue

Error occurred prerendering page "/page-name". Read more: https://nextjs.org/docs/messages/prerender-error
TypeError: Cannot read property 'registered' of undefined
    at /project-directory/node_modules/@emotion/styled/base/dist/emotion-styled-base.cjs.prod.js:131:53
    at Styled(svg) (/project-directory/node_modules/@emotion/react/dist/emotion-element-20108edd.cjs.prod.js:62:16)
    at d (/project-directory/node_modules/react-dom/cjs/react-dom-server.node.production.min.js:33:498)
    at bb (/project-directory/node_modules/react-dom/cjs/react-dom-server.node.production.min.js:36:16)
    at a.b.render (/project-directory/node_modules/react-dom/cjs/react-dom-server.node.production.min.js:42:43)
    at a.b.read (/project-directory/node_modules/react-dom/cjs/react-dom-server.node.production.min.js:41:83)
    at Object.exports.renderToString (/project-directory/node_modules/react-dom/cjs/react-dom-server.node.production.min.js:52:138)
    at Object.renderPage (/project-directory/node_modules/next/dist/server/render.js:686:46)
    at Object.defaultGetInitialProps (/project-directory/node_modules/next/dist/server/render.js:316:51)
    at Function.getInitialProps (/project-directory/dist/apps/ui/.next/server/pages/_document.js:514:20)
Docker file: 
FROM node:14.21.0-alpine3.16

ARG ENV="${ENV}"

RUN apk --no-cache add git

RUN git clone --single-branch --branch master 

WORKDIR /project-directory

RUN npm config set user 0

RUN node --version

RUN npm --version

RUN npm cache clean --force

RUN npm install --force

RUN npm i @nx-tools/nx-docker

RUN npm install -g node-modules

RUN npm install -g @nrwl/cli

RUN npm run build:${ENV} -----> error at this step

CMD npx nx run ui:serve --configuration=production

Expected behavior:

It should build successfully without throwing any error.

Environment information:

  • react version: 17.0.2
  • next version: 12.0.7
  • nx version: 13.6.1
  • @emotion/react version: 11.10.5

About this issue

  • Original URL
  • State: closed
  • Created a year ago
  • Reactions: 1
  • Comments: 16 (4 by maintainers)

Commits related to this issue

Most upvoted comments

I encountered this issue and realized it is easily reproducible by using JSDOM to patch the SSR global document, which is required for my SSR use case.

This wasn’t an issue with NextJS pages directory but is now with the app directory.

Any thoughts?

  const jsdom = require('jsdom')
  const html = `<!DOCTYPE html><html><body></body></html>`
  console.log('PATCHING JSDOM')
  const { window } = new jsdom.JSDOM(html)
  global.window = window
  global.document = window.document
X ../../node_modules/@emotion/styled/base/dist/emotion-styled-base.esm.js (140:38) @ eval
X Internal error: TypeError: Cannot read properties of null (reading 'registered')
   at eval (../../node_modules/@emotion/styled/base/dist/emotion-styled-base.esm.js:152:134)
   at eval (../../node_modules/@emotion/react/dist/emotion-element-3838ba9e.esm.js:60:12)
   at Bi (/Users/james/app/packages/client/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:1:248560)
   at /Users/james/app/packages/client/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:1:256817
   at rs (/Users/james/app/packages/client/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:1:256864)
   at as (/Users/james/app/packages/client/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:1:261055)
   at os (/Users/james/app/packages/client/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:1:260774)
   at ts (/Users/james/app/packages/client/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:1:249948)
   at /Users/james/app/packages/client/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js:1:256808

@sharanyam123 how did you finally get to fix this

At that issue was with @material/mui. so they fixed it.

The issue I am facing is because of @mui/material, I think the issue will get resolved once their PR will get merged https://github.com/mui/material-ui/issues/36096 PR: https://github.com/mui/material-ui/pull/36162

I didn’t fix it. Issue was with @material/mui. so they resolved it

The issue I am facing is because of @mui/material, I think the issue will get resolved once their PR will get merged https://github.com/mui/material-ui/issues/36096 PR: https://github.com/mui/material-ui/pull/36162