unhandledrejection typeerror: cannot read properties of undefined (reading '__emotion_real')

Question

I got an error while building next js application : unhandledrejection typeerror: cannot read properties of undefined (reading '__emotion_real')

this happened after I updated the next js and emotion libraries:

"@emotion/babel-plugin": "^11.10.6",

"@emotion/react": "^11.11.1",

"@emotion/styled": "^11.11.0",

✓ Linting and checking validity of types
   ▲ Next.js 14.0.3
   - Environments: .env

   Disabled SWC as replacement for Babel because of custom Babel configuration ".babelrc.js" https://nextjs.org/docs/messages/swc-disabled
   Using external babel configuration from C:\Projects\travel11\travel-frontend\.babelrc.js
 ⚠ For production Image Optimization with Next.js, the optional 'sharp' package is strongly recommended. Run 'npm i sharp', and Next.js will use it automatically for Image Optimization.        
Read more: https://nextjs.org/docs/messages/sharp-missing-in-production
 ✓ Creating an optimized production build
 ✓ Compiled successfully
unhandledRejection TypeError: Cannot read properties of undefined (reading '__emotion_real')
    at createStyled (C:\Projects\travel11\travel-frontend\node_modules\@emotion\styled\base\dist\emotion-styled-base.cjs.prod.js:97:20)
    at C:\Projects\travel11\travel-frontend\.next\server\chunks\837.js:38:144700 {
  type: 'TypeError'
}
   Collecting page data  .

.babelrc.js

module.exports = {
  presets: [
    [
      'next/babel',
      {
        'preset-react': {
          runtime: 'automatic',
          importSource: '@emotion/react',
        },
      },
    ],
  ],
  plugins: ['@emotion/babel-plugin', 'babel-plugin-macros'],
};

package.json

  "dependencies": {
    "@emotion/babel-plugin": "^11.10.6",
    "@emotion/react": "^11.11.1",
    "@emotion/styled": "^11.11.0",
    "@hookform/resolvers": "^3.3.2",
    "@next/eslint-plugin-next": "^14.0.3",
    "@svgr/webpack": "^6.5.1",
    "@types/axios": "^0.14.0",
    "antd": "^5.3.2",
    "babel-plugin-macros": "^3.1.0",
    "classnames": "^2.3.2",
    "dayjs": "^1.11.7",
    "eslint": "^8.55.0",
    "eslint-config-next": "^14.0.3",
    "eslint-plugin-import": "^2.29.0",
    "mobx": "^6.8.0",
    "mobx-react-lite": "^3.4.3",
    "next": "^14.0.3",
    "next-sitemap": "^4.2.3",
    "node-fetch": "^3.3.1",
    "prettier": "^3.1.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-hash-string": "^1.0.0",
    "react-headroom": "^3.2.1",
    "react-hook-form": "^7.43.7",
    "react-stately": "^3.22.0",
    "react-toastify": "^9.1.1",
    "tailwindcss": "^3.3.6",
    "twin.macro": "^3.4.0",
    "typescript": "^5.3.2",
    "uuid": "^9.0.1",
    "uuidv4": "^6.2.13",
    "validator": "^13.11.0",
    "vest": "^5.2.2"
  },
  "devDependencies": {
    "@babel/preset-env": "^7.23.5",
    "@babel/preset-react": "^7.23.3",
    "@types/jest": "^29.5.11",
    "@types/node": "^20.10.3",
    "@types/react": "^18.2.42",
    "@types/react-dom": "^18.2.17",
    "@types/react-headroom": "^3.2.3",
    "@types/validator": "^13.11.7",
  }
}

Answer 1

I've solved that problem
The problem was the circular dependency of the imports, I had a components folder with a button and an ad component in it. They were both exported inside the component via index.ts. And it just so happened that the ad was calling itself.

To see if there is such a problem I downloaded the plugin "circular-dependency-plugin", and installed in the webpack config like this

next.config.js

const CircularDependencyPlugin = require('circular-dependency-plugin');
module.exports = {
...
webpack(config) {
    config.plugins.push(
      new CircularDependencyPlugin({
        // `onStart` is called before the cycle detection starts
        onStart({ compilation }) {
          console.log('start detecting webpack modules cycles');
        },
        // `onDetected` is called for each module that is cyclical
        onDetected({ module: webpackModuleRecord, paths, compilation }) {
          // `paths` will be an Array of the relative module paths that make up the cycle
          // `module` will be the module record generated by webpack that caused the cycle
          compilation.errors.push(new Error(paths.join(' -> ')));
        },
        // `onEnd` is called before the cycle detection ends
        onEnd({ compilation }) {
          console.log('end detecting webpack modules cycles');
        },
      }),
    );

    return config;
  },
...
}

And I was getting at assembly the exact components where I had circulation going on