Development server compile issues

[andrewbaisden]

Bug report

Describe the bug

Hey all so I have an app that I am working on which I am creating using Next.js.

Almost every single time I make a change the server auto compiles with the new changes which are fine. However most of the time the pages just fail to render properly.

It seems like the CSS is just not loading properly into the page. I have a file with some global CSS which appears to load fine. However none of the CSS for the styled components loads which is probably why the structure is broken.

Sometimes it takes minutes to render them properly and I have to constantly restart the server manually multiple times just to get the pages to load properly. Does anyone know what could be causing this?

I don’t currently have a next.config.js file would I need to create one and add some settings to fix these problems?

And also the page routing does not work in production builds. The index.js page loads fine but none of the routes work when I click on a link they all end in a 404. Even if I type the URL in the browser.

To Reproduce

Steps to reproduce the behavior, please provide code snippets or a repository:

https://github.com/andrewbaisden/andrew-baisden-portfolio-2020

Expected behavior

The app to render all pages properly and for the routing to work.

Screenshots

The CSS appears to work for some of the elements however the structure is completely broken.

System information

• OS: macOS
• Browser chrome, safari, firefox
• Version of Next.js: ^9.2.2

Additional context

N/A

[timneutkens]

Please add a full reproduction so that we can have a look at it.

[andrewbaisden]

Please add a full reproduction so that we can have a look at it.

Hi i added the repo. You only need to run the frontend server.

[andrewbaisden]

This post seems to fix the page routing issues i had with production builds https://spectrum.chat/next-js/general/page-routing-does-not-work-in-production-build~872efb71-031d-45fc-8fc3-d6d744d7ec5c

Stefan Januschke solution
Ok got it now - seems in dev next/Link href's are not case sensetive but in production they are. Components in page folders where capitalized the links where not.

However I still have rendering compile errors with both the Development and Production servers. Sometimes the pages load properly and sometimes they break. It is too inconsistent and unreliable to be deployed to a live server at this point until i find a solution.

[andrewbaisden]

I also had an error in my terminal Warning: componentWillMount has been renamed, and is not recommended for use. Which was caused by react-helmet. This also might have been causing some of the compile errors. I am now using react-helmet-async. I got rid of the terminal error and it does seem to be working a bit better but pages still don't render properly first time when using the development server. It takes multiple server restarts to get it to compile and pages break if i refresh the page. However it does seem to be working properly when i run the app in production so that is one improvement.

For reference

edrlab/thorium-reader#596
nfl/react-helmet#465
https://github.com/staylor/react-helmet-async

[andrewbaisden]

I am yet to get it working properly but I did learn one new thing. Sometimes it is possible to get the pages to compile and render properly if I make a change to one of the files and then save it. So hopefully this means less server restarts.

[timneutkens]

Guess this is a duplicate of #10830 🤔

[andrewbaisden]

Guess this is a duplicate of #10830 🤔

Hi no it's not a duplicate. My other issue was page routing this one is about broken layout while compiling and using the development server. I still have not got a solution for it but i did complete the project i was working on using Next.js. So I don't know if it will happen again if i start a new project from scratch. My existing project still has this problem but i found a quick fix as noted above. Making a change to one of the files and then saving it causes it to recompile and in most cases the layout is fixed.

[Timer]

We've made dozens of CSS improvements in Next.js 9.5+. Can you please upgrade to 9.5.3 or newer and use the new CSS support and let us know if the issue is fixed? Thanks!

[andrewbaisden]

We've made dozens of CSS improvements in Next.js 9.5+. Can you please upgrade to 9.5.3 or newer and use the new CSS support and let us know if the issue is fixed? Thanks!

Hi I got used to the broken hot reloading... 😅 Do you mean using this https://nextjs.org/docs/basic-features/built-in-css-support It would require quite a lot of code refactoring because I used styled-components for my CSS.

[Timer]

What Next version are you on currently?

[andrewbaisden]

What Next version are you on currently?

This is my package.json file "next": "^9.2.2"

{
	"name": "frontend",
	"version": "1.0.0",
	"description": "",
	"main": "index.js",
	"scripts": {
		"dev": "next",
		"build": "next build",
		"start": "next start",
		"export": "next export",
		"test": "jest"
	},
	"keywords": [],
	"author": "Andrew Baisden",
	"license": "MIT",
	"dependencies": {
		"@react-hook/window-size": "^1.0.13",
		"next": "^9.2.2",
		"react": "^16.12.0",
		"react-dom": "^16.12.0",
		"react-helmet-async": "^1.0.4",
		"styled-components": "^5.0.1",
		"uuid": "^7.0.1"
	},
	"devDependencies": {
		"jest": "^25.1.0"
	}
}

[timneutkens]

Try running yarn add next@latest (or npm install next@latest)

[andrewbaisden]

Try running yarn add next@latest (or npm install next@latest)

Hey so I updated to the latest version and it made the hot reloading a bit worse. If I manually reload the browser on one of the pages sometimes they break and the CSS does not load at all. I used to be able to fix it by just making a change to the html/css but now the pages stay broken. I have to manually restart the server to get it working again. Luckily this only seems to happen in the development server and not my production website but still its not great.

I think the only solution would be a clean start with a new project which I am not likely to do with my current website as that would take too much time and I have other projects to work on.

[balazsorban44]

This issue has been automatically locked due to no recent activity. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.