next-css: Routing to another page doesn't load CSS in development mode #263

Splendith · 2018-09-16T19:49:38Z

Describe the bug

When using Next.js with next-css plugin (canary version). Routing to another page doesn't load CSS styles, you will need to refresh the page to get the styles.

To Reproduce

Clone https://github.com/Splendith/next.js-test (on master branch)
Run npm i and then npm run dev
Visit http://localhost:3000, you will see index page with big red "HelloIndexPage" text
Click 'Test Page' link
You will see the non-styled "HelloTestPage" text
Refresh page and you will see big orange "HelloTestPage" text

System information

Version of next: 7.0.0-canary.18
Version of @zeit/next-css: 0.2.1-canary.2
Version of react: 16.5.0
Web browser: Google Chrome / Firefox

Additional context

It does not happen in production deployment (npm run build -> npm run start).
next 6.0 and @zeit/next-css 0.2.0 also happen, you can reproduce by checkout next_v6 branch and follow the same above steps

The text was updated successfully, but these errors were encountered:

timneutkens · 2018-09-16T20:09:00Z

This is fixed in next@canary + @zeit/next-css@canary as far as I know.

Splendith · 2018-09-16T20:22:23Z

@timneutkens I tried in next@canary + @zeit/next-css@canary (by using npm i next@canary @zeit/next-css@canary today, or sorry if I do something wrong). Could you please follow my 'To Reproduce' section. It's very simple repos that used the canary version.

GerardVee · 2018-09-23T08:16:29Z

Any updates? I'm also having the same issue under similar circumstances.

calmburst · 2018-09-28T06:45:03Z

Looking forward for a fix :)

kylemh · 2018-10-05T18:08:47Z

This is a dupe of #282 and #282 contains a workaround with extra discussion. Should this issue be closed, and the other left open?

zhanglin-doudou · 2018-10-23T06:09:10Z

same problem.
The file styles.chunk.css in .next/static/css/ has changed when i use Link or Router.push() to another page, but in the browser it stays the same from the first time loaded.

I had found a way to solve it. Not really perfect.

I have used a component Layout in every page.

import React, { Component } from 'react';
import Head from 'next/head';

export default class Layout extends Component {
  render() {
    const { children, title, style, className } = this.props;

    return (
      <div className={'main-layout col ' + className} style={style}>
        <Head>
          <title>{title}</title>
          {process.env.NODE_ENV !== 'production' && (
            <link rel="stylesheet" type="text/css" href={'/_next/static/css/styles.chunk.css?v=' + Date.now()} />
          )}
        </Head>
        <div className="main-content">{children}</div>
      </div>
    );
  }
}

timneutkens · 2018-10-23T10:44:46Z

Duplicate of #282

drydenwilliams · 2019-11-21T12:24:25Z

I just found that I wasn't doing using <Link /> correctly so on any sub pages my CSS wasn't loading.

I had to change:

 <Link
      href={`/event/${eventSlug}/${EventID}`}
      as={`/event/${eventSlug}/${EventID}`}
    >

to this:

 <Link
      href={`/event/[name]/[id]`}
      as={`/event/${eventSlug}/${EventID}`}
    >

Noting that the href prop is now the path of the page in the pages folder and as is the URL to show in URL bar of the browser.

chornos13 · 2020-05-03T01:33:16Z

I just made some modification from this issue #282

and I got this working for me

fix memory leak (update jun 17 20)

//_app.js

// import App from 'next/app'
import React from 'react'
import Router from 'next/router';
import * as PropTypes from 'prop-types'


class MyApp extends React.Component {
  cacheURL = []
  handleLoadStyle = (url) => {
    if (this.cacheURL.includes(url)) return
    const els = document.querySelectorAll(
      'link[href*="/_next/static/css/styles.chunk.css"]')
    const timestamp = new Date().valueOf()
    for (let i = 0; i < els.length; i++) {
      if (els[i].rel === 'stylesheet') {
        els[i].href = '/_next/static/css/styles.chunk.css?v=' + timestamp
        console.log('Style loaded')
        this.cacheURL.push(url)
        break
      }
    }
  }

  componentDidMount () {
    if (process.env.NODE_ENV !== 'production') {
      // prevent duplication listener
      Router.events.on('routeChangeComplete', this.handleLoadStyle)
    }
  }

  componentWillUnmount () {
    if (process.env.NODE_ENV !== 'production') {
      Router.events.off('routeChangeComplete', this.handleLoadStyle)
    }
  }

  render () {
    let { Component, pageProps } = this.props


    return <Component {...pageProps} />
  }
}

MyApp.propTypes = {
  Component: PropTypes.any,
  pageProps: PropTypes.any
}


export default MyApp

or you can convert it to hooks for simplification

raindecastro · 2020-06-14T00:31:33Z

@chornos13 Thanks for the workaround! Although there seems to be a problem with rendering styles for dynamic routes.

thotho19 · 2020-06-25T21:59:08Z

use cdn

faeghe-hajiabadi · 2020-07-23T12:15:52Z

I have same problem but in mine I can see css styles in page I access into by Link from other pages but when I want to access page with url I do not see any css style. has anyone any idea?

dmtx97 · 2020-07-27T17:59:40Z

I am having a similar issue. Does the CSS load for you after a refresh? That is my issue.

MartinYounghoonKim · 2020-08-25T15:02:59Z

any update ?

dmtx97 · 2020-08-25T19:14:33Z

@MartinYounghoonKim As far as I know I haven't found a fix. Styling works perfectly in production mode though.

insivika · 2020-08-29T01:12:52Z

Having this issue as well. Replacing the href as shown above does not work as it just replaces it with the one of the previous page :/ This is also happening in production

snk-js · 2020-10-11T16:34:40Z

What I did to solve this problem is to make a direct on root index. Simple as that I think. Then, you could redirect to whatever the page you wanna that breaks, and the css will load just correctly (just if you did a refresh)

// import { AmplifyAuthenticator } from '@aws-amplify/ui-react'
import { Amplify, API, Auth, withSSRContext } from 'aws-amplify'
import { useRouter } from 'next/router'
import awsExports from '../src/aws-exports'
import { useEffect } from 'react'
// import { createPost } from '../src/graphql/mutations'
// import { listPosts } from '../src/graphql/queries'
import styles from '../styles/Home.module.css'

Amplify.configure({ ...awsExports, ssr: true })

const RootPage = ({ props }) => {
console.log('props', props)
const router = useRouter()

useEffect(() => {
router.push('/ask')
})
return null
}

export async function getStaticProps(ctx) {
if (ctx.req) {
ctx.res.writeHead(302, { Location: '/ask' })
ctx.res.end()
}
return { props: {  } }
}

export default RootPage

AlexandraKlein · 2020-12-27T16:09:44Z

Modified from @chornos13 using hooks.

In _app.js:

import React, { useEffect } from 'react';
import { useRouter } from 'next/router';

const cacheURL = [];

const handleLoadStyle = url => {
  if (cacheURL.includes(url)) {
    return;
  }

  const styleLinks = document.querySelectorAll(
    'link[href*="/_next/static/css/styles.chunk.css"]'
  );

  const timestamp = new Date().valueOf();

  [...styleLinks].map(link => {
    if (link.rel === 'stylesheet') {
      link.href = `/_next/static/css/styles.chunk.css?v=${timestamp}`;
      cacheURL.push(url);
    }
  });
};

function App({ Component, pageProps }) {
  const { asPath, events } = useRouter();

  useEffect(() => {
    if (process.env.NODE_ENV === 'production') {
      return;
    }

    events.on('routeChangeComplete', handleLoadStyle);

    return () => {
      events.off('routeChangeComplete', handleLoadStyle);
    };
  }, [asPath]);

  return <Component {...pageProps} />;
}

export default App;

timneutkens closed this as completed Sep 16, 2018

timneutkens reopened this Sep 16, 2018

timneutkens marked this as a duplicate of #282 Oct 23, 2018

timneutkens closed this as completed Oct 23, 2018

igl mentioned this issue Apr 5, 2020

Cant change page with 'next/link' & 'next-css' #282

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

next-css: Routing to another page doesn't load CSS in development mode #263

next-css: Routing to another page doesn't load CSS in development mode #263

Splendith commented Sep 16, 2018

timneutkens commented Sep 16, 2018

Splendith commented Sep 16, 2018 •

edited

Loading

GerardVee commented Sep 23, 2018

calmburst commented Sep 28, 2018

kylemh commented Oct 5, 2018

zhanglin-doudou commented Oct 23, 2018 •

edited

Loading

timneutkens commented Oct 23, 2018

drydenwilliams commented Nov 21, 2019 •

edited

Loading

chornos13 commented May 3, 2020 •

edited

Loading

raindecastro commented Jun 14, 2020 •

edited

Loading

thotho19 commented Jun 25, 2020

faeghe-hajiabadi commented Jul 23, 2020

dmtx97 commented Jul 27, 2020

MartinYounghoonKim commented Aug 25, 2020

dmtx97 commented Aug 25, 2020

insivika commented Aug 29, 2020 •

edited

Loading

snk-js commented Oct 11, 2020 •

edited

Loading

AlexandraKlein commented Dec 27, 2020 •

edited

Loading

next-css: Routing to another page doesn't load CSS in development mode #263

next-css: Routing to another page doesn't load CSS in development mode #263

Comments

Splendith commented Sep 16, 2018

Describe the bug

To Reproduce

System information

Additional context

timneutkens commented Sep 16, 2018

Splendith commented Sep 16, 2018 • edited Loading

GerardVee commented Sep 23, 2018

calmburst commented Sep 28, 2018

kylemh commented Oct 5, 2018

zhanglin-doudou commented Oct 23, 2018 • edited Loading

timneutkens commented Oct 23, 2018

drydenwilliams commented Nov 21, 2019 • edited Loading

chornos13 commented May 3, 2020 • edited Loading

raindecastro commented Jun 14, 2020 • edited Loading

thotho19 commented Jun 25, 2020

faeghe-hajiabadi commented Jul 23, 2020

dmtx97 commented Jul 27, 2020

MartinYounghoonKim commented Aug 25, 2020

dmtx97 commented Aug 25, 2020

insivika commented Aug 29, 2020 • edited Loading

snk-js commented Oct 11, 2020 • edited Loading

AlexandraKlein commented Dec 27, 2020 • edited Loading

Splendith commented Sep 16, 2018 •

edited

Loading

zhanglin-doudou commented Oct 23, 2018 •

edited

Loading

drydenwilliams commented Nov 21, 2019 •

edited

Loading

chornos13 commented May 3, 2020 •

edited

Loading

raindecastro commented Jun 14, 2020 •

edited

Loading

insivika commented Aug 29, 2020 •

edited

Loading

snk-js commented Oct 11, 2020 •

edited

Loading

AlexandraKlein commented Dec 27, 2020 •

edited

Loading