Nextjs does not render styles on the server (client only) when used within a monorepo that has mixed versions of styled-jsx

What version of Next.js are you using?

12.0.7

What version of Node.js are you using?

14.18.1

What browser are you using?

chrome

What operating system are you using?

mac0s

How are you deploying your application?

vercel

Describe the Bug

styled-jsx does not render styles server side when there are multiple versions of itself within a monorepo.

This is directly related to https://github.com/vercel/styled-jsx/issues/751. I am bringing it up here because I suspect there is something else going on besides node module resolution causing this bug – is it possible that the nextjs webpack config is grabbing the wrong version of styled-jsx at compile time?

Video

Before: Styling works because JS is enabled. After: JS is disabled so styling does not work.

Expected Behavior

I expect the styling to be rendered on the server, not the client.

To Reproduce

1. Clone @Regaddi’s repo: https://github.com/Regaddi/yarn-next-styled-jsx-fouc
2. run yarn install
3. run cd /packages/example/
4. yarn run dev
5. In chrome, open dev tools and click the little cog icon at the top right.
6. Disable Javascript and do not close the dev tools window.
7. Refresh page.
8. Observe no styles rendered.

[scott-coates]

Update:

It looks like webpack is doing its thing with styled-jsx and pulling it somehow. If you view yarn-next-styled-jsx-fouc/node_modules/next/node_modules/styled-jsx/dist/webpack.js in the example repo, you’ll see

  var commentType = content.match(/\/*\s*@styled-jsx=(scoped|global|resolve)/);

  if (commentType) {
    options.type = commentType[1];
  }

  var output = "import css from 'styled-jsx/css';\n\nconst styles = css";

So it looks like webpack is doing some static stuff with styled-jsx and pulls in that depdendency via this pattern (scoped|global|resolve). I don’t really know what’s going on here but it’s progress 🤷‍♂️

[github-actions[bot]]

This closed issue has been automatically locked because it had no new activity for a month. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.