Missing styles in production (NextJS + Chakra)

Current behavior:

Styles present in development:

Are missing in production:

To reproduce:

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",
  ...
},

[ivancuric]

Fixed by putting the following in my package.json:

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

[Andarist]

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