Styled Components Issue on Next v8.0.0

[jonleopard]

Bug report

Describe the bug

Receiving a Unhandled Rejection (TypeError): Cannot read property 'replace' of undefined error from _document.js, which is where all the styled-components settings are. I have not changed anything from my previous config, I just upgraded to the newest version of Next.

ctx.renderPage ./pages/_document.js:10

ctx.renderPage
./pages/_document.js:10
   7 | const originalRenderPage = ctx.renderPage;
   8 | 
   9 | try {
> 10 |   ctx.renderPage = () =>
  11 |     originalRenderPage({
  12 |       enhanceApp: App => props => sheet.collectStyles(<App {...props} />),
  13 |     });

Function._callee$ ./pages/_document.js:15

  12 |     enhanceApp: App => props => sheet.collectStyles(<App {...props} />),
  13 |   });
  14 | 
> 15 | const initialProps = await Document.getInitialProps(ctx);
  16 | return {
  17 |   ...initialProps,
  18 |   styles: (

Expected behavior

App should run in both dev/prod modes.

Screenshots

System information

• OS: MacOS

• Version of Next.js: 8.0.0

[XHMM]

same error report when upgrade to next 8, it sames like styled-jsx problem, I changed styled-jsx version back to 3.1.0 using resolutions (i use yarn) , and problem gone

[PS:] I am using material-ui apollo

[timneutkens]

@jonleopard @XHMM can you provide a reproduction with-styled-components runs fine.

[jonleopard]

@XHMM I am using apollo as well. I am trying to create a reproduction of this issue, so far I have all the styled-components parts up and running with no issues. So that leads me to think that this might have something to do with Apollo (maybe in _app.js). Gonna do some more digging by adding Apollo now.

[jonleopard]

@XHMM Do you mind posting your _app.js here?

[timneutkens]

@jonleopard do you have a <style jsx> or <style jsx global> somewhere?

[XHMM]

Here's my _app.ts @jonleopard

import App, { Container } from "next/app";
import React from "react";
import { MuiThemeProvider } from "@material-ui/core/styles";
import CssBaseline from "@material-ui/core/CssBaseline";
import JssProvider from "react-jss/lib/JssProvider";
import { ApolloProvider } from "react-apollo";
import { SnackbarProvider } from "notistack";
import { Button } from "@material-ui/core";
import NProgress from "next-nprogress/component";

import withApolloClient from "../lib/withApolloClient";
import getPageContext from "../lib/getPageContext";

class MyApp extends App<any> {
  private pageContext: any;
  constructor(props) {
    super(props);
    this.pageContext = getPageContext();
  }

  componentDidMount() {
    // Remove the server-side injected CSS.
    const jssStyles = document.querySelector("#jss-server-side");
    if (jssStyles && jssStyles.parentNode) {
      jssStyles.parentNode.removeChild(jssStyles);
    }
  }
  render() {
    const { Component, pageProps, apolloClient } = this.props;
    return (
      <Container>
        <ApolloProvider client={apolloClient}>
          <JssProvider
            registry={this.pageContext.sheetsRegistry}
            generateClassName={this.pageContext.generateClassName}
          >
            {/* MuiThemeProvider makes the theme available down the React
              tree thanks to React context. */}
            <MuiThemeProvider
              theme={this.pageContext.theme}
              sheetsManager={this.pageContext.sheetsManager}
            >
              {/* CssBaseline kickstart an elegant, consistent, and simple baseline to build upon. */}
              <CssBaseline />
              {/* Pass pageContext to the _document though the renderPage enhancer
                to render collected styles on server side. */}
              <SnackbarProvider
                maxSnack={3}
                anchorOrigin={{
                  vertical: "top",
                  horizontal: "right"
                }}
                hideIconVariant
                action={[
                  <Button color="secondary" size="small">
                    Close
                  </Button>
                ]}
              >
                <>
                  <NProgress spinner={false}/>
                  <Component pageContext={this.pageContext} {...pageProps}/>
                </>
              </SnackbarProvider>
            </MuiThemeProvider>
          </JssProvider>
        </ApolloProvider>
      </Container>
    );
  }
}

export default withApolloClient(MyApp);

[jonleopard]

@timneutkens Nope, I don't even have styled-jsx installed. I'm not sure why there's even a mention of it in the stack trace.

[jonleopard]

I think I found the culprit. I'm using next-nprogress, which has styled-jsx as a dependency. There's an issue up for the same exact error.

[giuseppeg]

@XHMM it would be really helpful if you could make a minimal testcase (a Next.js app) so that I can clone it and take a look.

[jonleopard]

@giuseppeg I found the root cause of the issue. I'm usingnext-nprogress which has styled-jsx as a dependency (there's currently an issue here). Curious how v8 broke next-nprogress, I'll go take a look and see if I can offer a PR. Closing the issue now as this is a problem with next-nprogress and not nextjs.

Sorry for the noise!

[giuseppeg]

@jonleopard yeah we changed some internal implementation detail in styled-jsx but didn't consider the fact that people might run different versions of the library.

FWIW can you try to instruct yarn to resolve to 3.2.0 (using https://yarnpkg.com/lang/en/docs/selective-version-resolutions/)

[jonleopard]

@giuseppeg Gotcha, thanks for the heads up :)

[hugotox]

I have the same error with next 8 and styled-jsx 3.1.2. I tried changing versions of styled-jsx but none worked. The only solution for me at the moment was to stick to next 7 😢