emotion: Missing styles in production (NextJS + Chakra)

Current behavior:

Styles present in development: Screenshot 2021-04-10 at 15 41 37

Are missing in production: Screenshot 2021-04-10 at 15 41 47

To reproduce:

ezgif-6-632406f2e83a

The only difference between the menus are depending on the auth state: showing or not additionnal button actions. I suspect something is breaking the style in the Menu component. But I tried a lot of things, I don’t understand what’s the issue…

https://github.com/binajmen/chakra-nextjs/blob/develop/components/layout/Menu.tsx

Note that in development (yarn dev), I have no styling issue.

Expected behavior:

Environment information:

"dependencies": {
  "@chakra-ui/react": "^1.3.3",
  "@emotion/react": "^11.1.5",
  "@emotion/styled": "^11.1.5",
  "emotion-theming": "^11.0.0",
  "next": "^10.0.7",
  "react": "17.0.1",
  "react-dom": "17.0.1",
  ...
},

About this issue

Original URL
State: closed
Created 3 years ago
Comments: 16 (6 by maintainers)

Most upvoted comments

Fixed by putting the following in my package.json:

  "resolutions": {
    "react-select/@emotion/react": "^11.4.1"
  }

ivancuric on Aug 17, 2021

Execute this script asap in your app:

var value
Object.defineProperty(window, '__EMOTION_REACT_11__', {
  set(newValue) {
    value = newValue
    debugger
  },
  get() {
    return value
  }
})

and inspect the call stack for both calls to this setter

Andarist on Oct 13, 2021

From what I understand the format of the yarn.lock:

2nd and 3rd entry described the resolved @emotion/react and react-select and lists their requirements on @emotion/cache (it’s basically a copy of their respective package.json#dependencies)
the first entry first mentions those requirements that were satisfied by this whole entry and to which version of @emotion/cache it finally resolved (notice that the version field has no modifier like ^ as this is the final, resolved, version that was actually installed)

Usually, if you end up with multiple copies of a particular library then you have multiple entries like the first one for that particular library.

I’m afraid that digging into this further would take me a considerable amount of time that I don’t currently have. I could consider diving into this if you would sponsor my work though.

Andarist on Apr 11, 2021

Hi @Andarist,

Thank you for your input. I’ve never played with webpack before, nor on this project. I believe in NextJS, you can adapt webpack by modifying next.config.js. In my case, the content is very light.

Regarding @emotion/cache, you mentioned in another issue (can’t find back the link) that having different cache version could be an issue (IF I remember correctly… I’ve read a lot of things in the past 48 hours 🤭 ). Could it be the case?

"@emotion/cache@^11.0.0", "@emotion/cache@^11.1.3":              <-------------
  version "11.1.3"
  resolved "https://registry.yarnpkg.com/@emotion/cache/-/cache-11.1.3.tgz#c7683a9484bcd38d5562f2b9947873cf66829afd"
  integrity sha512-n4OWinUPJVaP6fXxWZD9OUeQ0lY7DvtmtSuqtRWT0Ofo/sBLCVSgb4/Oa0Q5eFxcwablRKjUXqXtNZVyEwCAuA==
  dependencies:
    "@emotion/memoize" "^0.7.4"
    "@emotion/sheet" "^1.0.0"
    "@emotion/utils" "^1.0.0"
    "@emotion/weak-memoize" "^0.2.5"
    stylis "^4.0.3"

"@emotion/react@^11.1.1", "@emotion/react@^11.1.5":
  version "11.1.5"
  resolved "https://registry.yarnpkg.com/@emotion/react/-/react-11.1.5.tgz#15e78f9822894cdc296e6f4e0688bac8120dfe66"
  integrity sha512-xfnZ9NJEv9SU9K2sxXM06lzjK245xSeHRpUh67eARBm3PBHjjKIZlfWZ7UQvD0Obvw6ZKjlC79uHrlzFYpOB/Q==
  dependencies:
    "@babel/runtime" "^7.7.2"
    "@emotion/cache" "^11.1.3"              <-------------
    "@emotion/serialize" "^1.0.0"
    "@emotion/sheet" "^1.0.1"
    "@emotion/utils" "^1.0.0"
    "@emotion/weak-memoize" "^0.2.5"
    hoist-non-react-statics "^3.3.1"

react-select@^4.1.0:
  version "4.3.0"
  resolved "https://registry.yarnpkg.com/react-select/-/react-select-4.3.0.tgz#6bde634ae7a378b49f3833c85c126f533483fa2e"
  integrity sha512-SBPD1a3TJqE9zoI/jfOLCAoLr/neluaeokjOixr3zZ1vHezkom8K0A9J4QG9IWDqIDE9K/Mv+0y1GjidC2PDtQ==
  dependencies:
    "@babel/runtime" "^7.12.0"
    "@emotion/cache" "^11.0.0"              <-------------
    "@emotion/react" "^11.1.1"
    memoize-one "^5.0.0"
    prop-types "^15.6.0"
    react-input-autosize "^3.0.0"
    react-transition-group "^4.3.0"

binajmen on Apr 11, 2021