-
Notifications
You must be signed in to change notification settings - Fork 319
next-css: Routing to another page doesn't load CSS in development mode #263
Comments
This is fixed in |
@timneutkens I tried in |
Any updates? I'm also having the same issue under similar circumstances. |
Looking forward for a fix :) |
same problem. I had found a way to solve it. Not really perfect. I have used a component 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>
);
}
} |
Duplicate of #282 |
I just found that I wasn't doing using I had to change:
to this:
Noting that the |
I just made some modification from this issue #282 and I got this working for me fix memory leak (update jun 17 20)
or you can convert it to hooks for simplification |
@chornos13 Thanks for the workaround! Although there seems to be a problem with rendering styles for dynamic routes. |
use cdn |
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? |
I am having a similar issue. Does the CSS load for you after a refresh? That is my issue. |
any update ? |
@MartinYounghoonKim As far as I know I haven't found a fix. Styling works perfectly in production mode though. |
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 |
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)
|
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; |
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
npm i
and thennpm run dev
http://localhost:3000
, you will see index page with big red "HelloIndexPage" textSystem information
Additional context
npm run build
->npm run start
).The text was updated successfully, but these errors were encountered: