Not all styled components working in development

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.

[dietrichmax]

upgraded to next@10.0.0 and the issue is gone.

[jamesmosier]

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