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:
reactversion: 17.0.2nextversion: 12.0.7nxversion: 13.6.1@emotion/reactversion: 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
- Update gatsby.yml https://github.com/emotion-js/emotion/issues/2989#issuecomment-1582619718 — committed to cantpr09ram/blog-v1 by cantpr09ram a year ago
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?
At that issue was with @material/mui. so they fixed it.
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