Missing styles in production (NextJS + Chakra)

[binajmen]

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

[binajmen]

I turns out that NextJS Link (next/link) prefetch by default. Although I would like to keep what seems an effective strategy, I tried to disabled it in my NextButton with prefetch={false}.

However, it didn't solve the problem, just shift it. Now the Drawer opens correctly, but hovering the "Mon compte" button breaks the design:

[iChenLei]

Maybe chakra-ui repository is better place to report issue?

[Andarist]

@emotion/cache module gets initialized more than once - its copy is contained in https://orderbru-crqewikkia-ew.a.run.app/_next/static/chunks/pages/account-7a6e373ffb1338a0f228.js and this should not happen. You should ensure that Emotion is loaded just once throughout the lifetime of your app.

[binajmen]

Hi @Andarist,

Thank you for pointing that out. I think this is linked to react-google-places-autocomplete: I'm having this warning when using RGPA:

You are loading @emotion/react when it is already loaded. Running multiple instances may cause problems. This can happen if multiple versions are used, or if multiple builds of the same version are used.

RGPA is based on react-select which is based on emotion. Is there a way to detect if @emotion/react is already loaded, so I can perhaps warn the maintainer of RGPA and/or react-select about the issue?

[Andarist]

That's why @emotion/react should be used as a peer dependency and not a regular dependency. I think that react-select maintainers are aware of the issue and they have chosen to use a regular dependency to make it easier for most users and this is a drawback that this approach has. You could report that to them nevertheless.

OTOH I can only see a single @emotion/cache in your yarn.lock here so there is also a possibility that your webpack doesn't configure stuff correctly. I would start by investigating external and entry configs.

[binajmen]

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"

[Andarist]

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.

[binajmen]

I already considered sponsoring the open source projects my project is relying on as soon as it is launched. You'll certainly be part of it! Coming from the country of beers, I can certainly see myself contribute to your beer consumption, further help or not 😉

[ivancuric]

Fixed by putting the following in my package.json:

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

[mattvb91]

Im currently experiencing the same thing. I have locked the resolutions for all libraries that are relying on @emotion the same way that @ivancuric has done it above but im still getting the You are loading @emotion/react when it is already loaded error.

I have also confirmed in my package-lock.json that there is only 1 installed version of @emotion/cache and @emotion/react with no success.

I am also on nextjs. Does anyone have any ideas on how to debug this more? Im completely lost trying to figure this out

[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

[mattvb91]

Thanks @Andarist i can confirm it is indeed the react-select booting and then another library simple-react-lightbox

Now the weird thing is I removed the react-select completely in the parent pages & when i navigate into where the simple-react-lightbox page is (client side navigation) the css is still missing.

I apologise as I am aware this is probably the wrong place to be asking for help but I seem to always come back to @emotion as the source from multiple libs in combination with nextjs

[Andarist]

It's really hard to advise any further without a repro case - react-select defines Emotion as a regular dep and simple-react-lightbox doesn't define it as a dependency at all. So while the latter is completely incorrect it at least shouldn't cause an additional Emotion dependency to be installed. Somehow 2 copies of Emotion got installed though - and this is partially a problem not directly related to Emotion. This could happen for any package and could cause weird issues for them as well.

What you have to do is to figure out why this happens. If you are using yarn then you could try running yarn why (I'm not sure what's the equivalent command for npm/pnpm/other)

[mattvb91]

Thanks @Andarist and yea im aware im probably in the wrong spot.

Did some more digging and wanted to create a minimum repro example and it turns out as soon as i added @react-google-maps/api to the repro example that all the css started breaking in the following client load pages. Will look further there. Thanks again I appreciate it

[woodwardryan]

Fixed by putting the following in my package.json:

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

I added this to package.json and then removed and then reinstalled react-select. Note, I think it should be ^11.1.4

[Jish2]

Also experiencing this from react-google-places-autocomplete with Next, but I don't have react-select as a dependency for my project, so unable to add this to package.json :

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

Is the best course of action installing react-select so I can add this to peerDependencies?