Issue with nextjs 8

[theallseingeye]

Since upgrading to nextjs 8 I'm getting an issue with styled-jsx

[theallseingeye]

I get this error:

TypeError: Cannot read property 'replace' of undefined
    at sanitize (/home/project/node_modules/styled-jsx/dist/stylesheet-registry.js:21:15)
    at StyleSheetRegistry.computeSelector (/home/project/node_modules/styled-jsx/dist/stylesheet-registry.js:207:17)
    at StyleSheetRegistry.getIdAndRules (/home/project/node_modules/styled-jsx/dist/stylesheet-registry.js:234:22)
    at StyleSheetRegistry.add (/home/project/node_modules/styled-jsx/dist/stylesheet-registry.js:80:38)
    at JSXStyle.render (/home/project/node_modules/styled-jsx/dist/style.js:74:28)
    at processChild (/home/project/node_modules/react-dom/cjs/react-dom-server.node.development.js:2863:18)
    at resolve (/home/project/node_modules/react-dom/cjs/react-dom-server.node.development.js:2716:5)
    at ReactDOMServerRenderer.render (/home/project/node_modules/react-dom/cjs/react-dom-server.node.development.js:3100:22)
    at ReactDOMServerRenderer.read (/home/project/node_modules/react-dom/cjs/react-dom-server.node.development.js:3059:29)
    at renderToString (/home/project/node_modules/react-dom/cjs/react-dom-server.node.development.js:3526:27)
    at render (/home/project/node_modules/next-server/dist/server/render.js:39:16)
    at renderPage (/home/project/node_modules/next-server/dist/server/render.js:96:16)
    at Function.getInitialProps (/home/project/app/.next/server/static/development/pages/_document.js:874:25)
    at Function._callee$ (/home/project/app/.next/server/static/development/pages/_document.js:2123:77)
    at tryCatch (/home/project/node_modules/regenerator-runtime/runtime.js:62:40)
    at Generator.invoke [as _invoke] (/home/project/node_modules/regenerator-runtime/runtime.js:288:22)

[maggo]

Not sure what causes the error as the style tag in component.js looks fine, but a downgrade to styled-jsx@3.0 fixes the issue

[giuseppeg]

it seems that styled-jsx is pinned in yarn.lock to 3.1.0

[sergiodxa]

I'm checking this, since I only use it on personal projects I'm doing it only when I have time.

[decebal]

@sergiodxa it looks like styled-jsx latest releases, in particular 3.2.1 fixed the issue, at least for me.

[lucasavila00]

@sergiodxa it looks like styled-jsx latest releases, in particular 3.2.1 fixed the issue, at least for me.

adding to package.json

  "resolutions": {
    "styled-jsx": "3.2.1"
  },

did not fix it but adding

  "resolutions": {
    "styled-jsx": "3.0.0"
  },

solved it for me.

[wglanzer]

@sergiodxa it looks like styled-jsx latest releases, in particular 3.2.1 fixed the issue, at least for me.

adding to package.json

  "resolutions": {
    "styled-jsx": "3.2.1"
  },

did not fix it but adding

  "resolutions": {
    "styled-jsx": "3.0.0"
  },

solved it for me.

Same for me, works with "3.0.0" but not with the latest "3.2.1"

[decebal]

Hmm, this is rather curious, once I apply the lock file from: #84 this issue is fixed, but there are quite a few packages.

Even when on the main repository(master branch on next-nprogress) if I rebuild the package the issue seems settled.

[rap2hpoutre]

@sergiodxa Thank you for this package! Since downgrading styled-jsx is not a viable solution, do you think you will find some time to address this issue?

[sergiodxa]

I don't have time to check this, if someone wants to send a PR I could merge it and publish a new version with the merged code.

[rap2hpoutre]

OK thank you!

Here is an alternative: https://github.com/zeit/next.js/tree/canary/examples/with-loading

[frontendtony]

In case anyone is having issues with this, here's a solution that worked for me (extending the example in the link posted by @rap2hpoutre above)

Install and import nprogress

npm install --save nprogress

import NProgress from 'nprogress';

Copy the css file from here and save it to your project (paste it in your existing base css file or create a new one and import it in your entry file)

Paste the following code in your root (entry) file. Here, I am using next/router which fires certain events on client navigation

const startProgress = () => NProgress.start();
const stopProgress = timer => {
  clearTimeout(timer);
  NProgress.done();
};

const showProgressBar = delay => {
  const timer = setTimeout(startProgress, delay);
  Router.events.on('routeChangeComplete', () => stopProgress(timer));
  Router.events.on('routeChangeError', () => stopProgress(timer));
};

Router.events.on('routeChangeStart', () => showProgressBar(300));

Explanation

A routeChangeStart event handler is added to the router and showProgressBar is called with the number of milliseconds to wait before showing the progress bar (basically mimicking what next-nprogress does).

showProgressBar sets a timeout to call NProgress.start() (this shows the progress bar) after the specified delay, then adds 2 listeners (routeChangeComplete and routeChangeError) that call stopProgress when navigation is 'done'.

By clearing the timeout, stopProgress ensures the progress bar is never shown if navigation completes before the set delay. Also stops the progress bar by calling NProgress.done() (This doesn't throw an error even if NProgress.start() was never called)

[EyMaddis]

Our you just copy the component into your project (with source attribution of course :) ).

[MontoyaAndres]

That issue still persists, what I did to avoid this was to do this in the _app.ts component:

import React from "react";
import App from "next/app";
import Head from "next/head";
import { createGlobalStyle, ThemeProvider } from "styled-components";
import Router from "next/router";
import NProgress from "nprogress";

import { Layout } from "../components/Layout";

const GlobalStyle = createGlobalStyle`
  /* NProgress styles. Make clicks pass-through */
  #nprogress {
    pointer-events: none;
  }

  #nprogress .bar {
    background: #ff4e45;
    position: fixed;
    z-index: 2;
    top: 0;
    left: 0;

    width: 100%;
    height: 4px;
  }

  /* Fancy blur effect */
  #nprogress .peg {
    display: block;
    position: absolute;
    right: 0px;
    width: 100px;
    height: 100%;
    box-shadow: 0 0 10px #29d, 0 0 5px #29d;
    opacity: 1.0;

    -webkit-transform: rotate(3deg) translate(0px, -4px);
        -ms-transform: rotate(3deg) translate(0px, -4px);
            transform: rotate(3deg) translate(0px, -4px);
  }
`;

export default class MyApp extends App {
  componentDidMount() {
    NProgress.configure({
      showSpinner: false
    });

    Router.events.on("routeChangeStart", () => NProgress.start());
    Router.events.on("routeChangeComplete", () => NProgress.done());
    Router.events.on("routeChangeError", () => NProgress.done());
  }

  componentWillUnmount() {
    Router.events.off("routeChangeStart", () => NProgress.start());
    Router.events.off("routeChangeComplete", () => NProgress.done());
    Router.events.off("routeChangeError", () => NProgress.done());
  }

  render() {
    const { Component, pageProps } = this.props;
    return (
      <>
        <Head>
          <title>Diey</title>
        </Head>
        <ThemeProvider theme={{}}>
          <Layout>
            <GlobalStyle />
            <Component {...pageProps} />
          </Layout>
        </ThemeProvider>
      </>
    );
  }
}

[sergiodxa]

Hello,

I'm not maintaining this anymore because I'm not using it anymore in my projects and I don't have time to work on it.

Feel free to fork and publish to npm with another name.