Not all styled components working in development

[dietrichmax]

Bug report

Describe the bug

After i run next not all styled components are working in development mode. Everything was fine like a week ago but suddenly some components are not passing any css anymore. In production everything works as expected.

To Reproduce

I followed the example with-styled-components, so my _document.js, _app.js and .babel.rc are looking like the following

_document.js

import Document from 'next/document';
import { ServerStyleSheet } from 'styled-components';

export default class MyDocument extends Document {
  static async getInitialProps(ctx) {
    const sheet = new ServerStyleSheet();
    const originalRenderPage = ctx.renderPage;

    try {
      ctx.renderPage = () =>
        originalRenderPage({
          enhanceApp: App => props => sheet.collectStyles(<App {...props} />)
        });

      const initialProps = await Document.getInitialProps(ctx);
      return {
        ...initialProps,
        styles: (
          <>
            {initialProps.styles}
            {sheet.getStyleElement()}
          </>
        )
      };
    } finally {
      sheet.seal();
    }
  }
}

_app.js

import Router from "next/router";
import React, { useEffect } from "react";
import App from "next/app";
import { init } from '@socialgouv/matomo-next';
import GlobalStyle from '@/styles/global.js'
//import CookieBanner from '@/components/cookies/cookie-banner' not used due to no cookies
import "prismjs/themes/prism-tomorrow.css";
import 'lazysizes';

const MATOMO_URL = process.env.NEXT_PUBLIC_MATOMO_URL;
const MATOMO_SITE_ID = process.env.NEXT_PUBLIC_MATOMO_SITE_ID;

class MyApp extends App {
  componentDidMount() {
    if (window.location.href.includes("mxd.codes")) {
      init({ url: MATOMO_URL, siteId: MATOMO_SITE_ID });
    }
  }
  render() {
    const { Component, pageProps } = this.props;
    return (
      <>
        <GlobalStyle/>
        <Component {...pageProps} />
      </>
    )
  }
}

export default MyApp;

.babelrc

{
    "presets": ["next/babel"],
    "plugins": [
        ["styled-components", { "ssr": true }]
    ]
}

Expected behavior

Css properties should be passed to components.

Screenshots

Production:

Development:

System information

• OS: [Windows]
• Version of Next.js: [e.g. 9.5.5]
• Version of Node.js: [e.g. 12.19.0]

Additional context

Add any other context about the problem here.

[jamesmosier]

Hi @DaTurboD. Could you create a repository with a reproduction of this? I wasn't able to reproduce as described.

[filingroove]

I too have this issue. styled-components broke with no warning in development, but working just fine in production :) My setup is also based on with-styled-components example. styled-components version is 5.2.0

I'm trying to narrow it down to something reproducible, but haven't managed it just yet. It's an SSR issue for sure because when I add { ssr: false } to my dynanic import, the issue goes away.

Console doesn't show any errors related to these specific components, but other component logs this:

webpack-internal:///../../node_modules/react-dom/cjs/react-dom.development.js:88 Warning: Prop `className` did not match. Server: "sc-1bt15ef-0 dQwXrj" Client: "sc-1bt15ef-0 fyNZCT"
    in header (created by styled.header)
    in styled.header (created by Header)
    in Header (created by Root)
    in section (created by styled.section)
    in styled.section (created by Root)
    in SlotProvider (created by Root)
    in ToastProvider (created by Root)
    in Be (created by Root)
    in AuthProvider (created by Root)
    in ResponsiveProvider (created by Root)
    in Root (created by withRouter(Root))
    in withRouter(Root) (created by e)
    in e
    in ErrorBoundary (created by ReactDevOverlay)
    in ReactDevOverlay (created by Container)
    in Container (created by AppContainer)
    in AppContainer
    in Root
printWarning @ webpack-internal:///../../node_modules/react-dom/cjs/react-dom.development.js:88

[filingroove]

Downgrading to styled-components@5.1.0 fixed the issue :) Not sure if this is an issue with Next.js

[jamesmosier]

Closing for now. If anyone has a reproduction feel free to post it 🚀

[dietrichmax]

Hi @jamesmosier. You can use this repository as reproduction of this issue: https://github.com/DaTurboD/mxd-codes-frontend

[jamesmosier]

I wasn't able to reproduce with the with-styled-components repository, so it must be something specific to your setup.

It'll take some time to dig in as it is quite a large repository.

[dietrichmax]

Downgrading to styled-components@5.1.1 or 5.1.0 unfortunately didn't fix the issue for me. Also setting ssr to false in .babelrc had no effect.

[dietrichmax]

upgraded to next@10.0.0 and the issue is gone.

[balazsorban44]

This issue has been automatically locked due to no recent activity. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.