Version 11.11.0 introduces breaking change in builds.

[elCarlosSantiago]

Current behavior:

To reproduce:

Upgraded from

    "@emotion/react": "11.10.4",
    "@emotion/styled": "11.10.4",

to

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

When running build now fails with the following error

TypeError: Cannot read properties of undefined (reading '__emotion_real')
    at createStyled 

• react version: 18.2.0

[Andarist]

Please always try to share a repro case in a runnable form - either by providing a git repository to clone or a codesandbox. OSS maintainers usually can't afford the time to set up the repro, even if exact steps are given.

[seljabali]

In using 11.11.0 saw the following build error error An unexpected error occurred: "https://registry.yarnpkg.com/@emotion/weak-memoize/-/weak-memoize-0.3.1.tgz: Request failed \"404 Not Found\"".

[michaldudak]

At MUI, we're also having a hard time upgrading to 11.11.0. It manifests itself in a pretty weird way, claiming that one of our functions is not a function: https://app.netlify.com/sites/material-ui/deploys/646362611ccf2300088a7a54#L111

After some digging and pulling a few hairs, I managed to figure out that webpack (used by Next.js) now treats our createSvgIcon function as a dynamic dependency, because some of its transitive dependencies are dynamic. I traced the dependencies back to Emotion and realized webpack now imports them differently than before. It used to be

/***/ 553139:
/***/ ((module) => {

module.exports = require("@emotion/react");;

/***/ }),

and now is

/***/ 553139:
/***/ ((module) => {

module.exports = import("@emotion/react");;

/***/ }),

(these snippets are from next.js built pages)

This makes me believe https://github.com/emotion-js/emotion/pull/3029 may cause a problem here. I'll keep investigating it tomorrow and try to create a minimal repro for you to check out.

[Andarist]

@michaldudak could we jump on a call tomorrow to go through this?

[emmatown]

A minimal reproduction of the general problem: https://github.com/emmatown/test-next-esm. Note the result of the logs, in the pages dir only one during server rendering, it's a promise

It's to do with Next's esm externals stuff, the problem doesn't occur in the app dir or in the pages dir when there's an app dir (because in the app dir, nearly everything is bundled so 'use client' and 'use server' works in dependencies so the esm externals stuff basically doesn't apply)

The code to look at in Next seems to be around https://github.com/vercel/next.js/blob/9e5116975d770e84024d0291e8e0422d7a59ee5e/packages/next/src/build/webpack-config.ts#L527.

imo, this is very much "Next is doing a problematic thing here" and Next should probably change, not Emotion. Adding a import condition (like Emotion did) should not break things. Fundamentally we're doing essentially what webpack itself recommends at https://webpack.js.org/guides/package-exports/#providing-commonjs-and-esm-version-stateful

[michaldudak]

Thanks for the detailed investigation, @emmatown! I opened an issue in next.js: https://github.com/vercel/next.js/issues/49898

[ullaskunder1]

hello, I am facing the same issue after upgrading or even before upgrading @emotion/ at run time it was showing few error missing types-jsx-runtime and types-jsx-namespace after work arround I was able to solve it but now when I try to build it it it give @emotion/react/types/jsx-namespace error

  "dependencies": {
    "@aws-amplify/api": "^6.0.37",
    "@aws-amplify/api-graphql": "^4.1.6",
    "@aws-amplify/auth": "^4.3.20",
    "@aws-amplify/core": "^6.3.2",
    "@aws-amplify/ui-components": "^1.9.6",
    "@aws-amplify/ui-react": "^1.2.25",
    "@aws-sdk/protocol-http": "^3.374.0",
    "@aws-sdk/querystring-builder": "^3.374.0",
    "@aws-sdk/util-utf8-browser": "^3.259.0",
    "@date-io/moment": "^2.13.1",
    "@emotion/react": "^11.11.4",
    "@emotion/styled": "^11.6.0",
    "@hookform/resolvers": "^2.8.8",
    "@mui/icons-material": "^5.2.5",
    "@mui/lab": "^5.0.0-alpha.72",
    "@mui/material": "^5.2.7",
    "@mui/x-data-grid": "^5.2.2",
    "@react-google-maps/api": "^2.7.0",
    "@testing-library/jest-dom": "^5.16.1",
    "@testing-library/react": "^12.1.2",
    "@testing-library/user-event": "^13.5.0",
    "@types/jest": "^27.4.0",
    "@types/node": "^16.11.19",
    "@types/qrcode.react": "^1.0.2",
    "@types/yup": "^0.32.0",
    "aws-amplify": "^4.3.12",
    "aws-sdk": "^2.1074.0",
    "buffer": "^6.0.3",
    "crypto-browserify": "^3.12.0",
    "date-fns": "^2.28.0",
    "date-fns-tz": "^1.3.0",
    "eslint-plugin-jest": "^25.3.4",
    "jwt-decode": "^3.1.2",
    "mime": "^3.0.0",
    "next-qrcode": "^2.0.0",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-dropzone": "^12.0.4",
    "react-hook-form": "^7.25.1",
    "react-router": "^6.2.1",
    "react-router-dom": "^6.2.1",
    "react-scripts": "5.0.0",
    "react-to-print": "^2.14.4",
    "react-uuid": "^2.0.0",
    "typescript": "^4.5.4",
    "url": "^0.11.3",
    "util": "^0.12.4",
    "web-vitals": "^2.1.3",
    "yup": "^0.32.11"
  },
    "devDependencies": {
    "@emotion/eslint-plugin": "^11.11.0",
    "@types/mime": "^3.0.1",
    "@types/react": "^18.2.79",
    "@types/react-dom": "^18.2.25",
    "@typescript-eslint/eslint-plugin": "^5.9.1",
    "@typescript-eslint/parser": "^5.9.1",
    "dotenv-cli": "^5.1.0",
    "eslint": "^8.6.0",
    "eslint-config-airbnb": "^19.0.4",
    "eslint-config-prettier": "^8.5.0",
    "eslint-import-resolver-alias": "^1.1.2",
    "eslint-import-resolver-typescript": "^2.5.0",
    "eslint-plugin-import": "^2.25.4",
    "eslint-plugin-jsx-a11y": "^6.5.1",
    "eslint-plugin-prettier": "^4.2.1",
    "eslint-plugin-react": "^7.28.0",
    "eslint-plugin-react-hooks": "^4.3.0",
    "prettier": "^2.7.1",
    "react-app-rewired": "^2.2.1"
  },