Blank screen on NextJS

[vibeart]

🐞 bug report

✍️ Description

Hello! i get a blank screen when i use nextjs in development environment (npm run dev). In production mode (npm run start), the application runs normally. Looking at the source code, I could see that it is generated normally and that the page's favicon is also loaded. In other browsers, the application loads normally. I tested it with a Vite application, and it worked normally. Only with NExtJS does the white screen appear when I'm in dev mode (npm run dev)

🕵🏼‍♂️ Is this a regression?

it is the my first time with Resposively app

🔬 Minimal Reproduction

Just make a fresh install of NextJS using npx create-next-app@latest and run it with npm run dev

🌍 Your Environment

Version: 0.19.0
Electron: 9.3.1
Chrome: 83.0.4103.122
Node.js: 12.14.1
V8: 8.3.110.13-electron.0
OS: Windows_NT x64 10.0.22000
WSL2

🔥 Exception or Error or Screenshot

[open-collective-bot[bot]]

Hey @vibeart :wave:,

Thank you for opening an issue. We will get back to you as soon as we can. Have you seen our Open Collective page? Please consider contributing financially to our project. This will help us involve more contributors and get to issues like yours faster.

https://opencollective.com/responsively

We offer priority support for all financial contributors. Don't forget to add priority label once you become one! :smile:

[bryandonmarc]

I am also having the same issue.

🌍 Your Environment

Version: 0.19.0
Electron: 9.3.1
Chrome: 83.0.4103.122
Node.js: 12.14.1
V8: 8.3.110.13-electron.0
OS: Windows_NT x64 10.0.22000
WSL2

My Development Server Environment:

• create-nuxt-app v4.0.0
• next v12.2.4

[TheBinaryGuy]

I have the same issue, for now I solved it by using my local IP address instead of localhost.

Ex. http://192.168.0.100:3000 instead of http://localhost:3000

[waldothedeveloper]

I am having the same issue as well, just a blank page, with no visible errors in the console :(

[mimukit]

Facing the same issue.

Btw, thanks @TheBinaryGuy for the temporary solution. 🎉

[Mussakova]

I have the same issue, for now I solved it by using my local IP address instead of localhost.

Ex. http://192.168.0.100:3000 instead of http://localhost:3000

I have the same original issue but, i couldn't fix it with the local ip.

I work on Windows 10, n I tried with all ipV4 address that provides my adapters, but any could connect.

My adapaters are:

• Ethernet adapter vEthernet (WSL)
• Wireless LAN adapter Local Area Connection* 11
• Wireless LAN adapter Wi-Fi

I tried with "http://192.0.0.0" or "http://192.0.0.0:3000" and in both ways, didn't work. (directions as examples not real)

Any other idea ?

[TheBinaryGuy]

@Mussakova Try setting up an alias in your hosts file. That might work.

[bernardm]

I'd like to pickup this issue and contribute a PR. I could not find a CONTRIBUTING doc for your repository. I did find the PR template. Do you have a Discord or chat channel where contributors discuss issues. I have questions about the architecture.

[dougg0k]

Actually just 0.0.0.0:PORT are enough. No need to get the local ip. Default port http://0.0.0.0:3000

[waldothedeveloper]

I have the same issue, for now, I solved it using my local IP address instead of localhost.

Ex. http://192.168.0.100:3000 instead of http://localhost:3000

This works for me on Mac Os Ventura!

[MozerBuce]

I have the same issue, for now I solved it by using my local IP address instead of localhost.

Ex. http://192.168.0.100:3000 instead of http://localhost:3000

I'm facing the same issue, but for now it worked.

Thanks @TheBinaryGuy

[Aakib-Khan]

my next js app went blank nothing is visible ,backend is working properly but the index page is not showing anything

[GBG7]

Actually just 0.0.0.0:PORT are enough. No need to get the local ip. Default port http://0.0.0.0:3000

tried this, it still gave me black screen no visible error codes

[ahmedyounes]

check if you are importing css files in root that may cause the issue try commenting them and check

[isrd1]

@ahmedyounes what does that mean, importing css files in root? I found when using Chrome and looking at Elements all the html elements were there but the first line in head was:

If I removed that line in developer tools the page appeared, albeit with poor formatting. I don't know what the line does but body{display:none} certainly fits what's happening. The proposed solutions of using an ip number, even 0.0.0.0 still loaded the DOM showing all the html but nothing actually visible on the page.

[jchatrny]

In my case it was caused by FOUC as @isrd1 suggested.

We use styled-components so styles are injected in head and there is no need for FOUC. So workaround we currently use is set

body {
   ...
   display: none;
}

in global styles.

EDIT: In third party libraries FOUC will happen. In our case we render skeletons instead of them, until data is fetched

[thereal-cc]

I'm having the opposite happen to me. My development environment works fine, but when I do npm run build && npm run start, I just get a blank page with an error that says a client side exception has occurred. I've tried all of the suggestions within this thread, and those haven't worked either. The repository is public if anyone wants to look at it, just look for portfolio-website-v1

[talhaa99]

I am having the same issue with the white black screen but using the local IP does not work for me as well

[xr-dev-saurabh]

I am having the same issue with the white black screen but using the local IP does not work for me as well

Did you find any solution. Running into the same issue. No error in the console but still not able to load image in browser.

[Shahindavoodicom]

in my case after many hours of trying every methods believe me , every methods

it was my google chrome version i updated and its work fine

[0tii]

I'm facing the same issue and none of the tricks here worked

[Shahindavoodicom]

I'm facing the same issue and none of the tricks here worked

try to update google chrome , node.js , or use another version of next.js

[Isabella-Mitchell]

I had a similar thing with a white screen appearing and 404 console log errors (in dev not build) while following along https://nextjs.org/learn/basics/create-nextjs-app/setup. Realised I had a speacial character in the folder that my code projects were in. I renamed it from '10% day' to 'ten-percent-day' and that fixed my issue.

[dr-nyt]

For whatever reasons the only browser that works for me is Microsoft Edge 🤷

[Antenna00]

Having a same issue here. Version is "next": "14.0.1" Browser is Opera.

In my case, this white screen seems to only appear in the very first time when I run npm run dev for the first time after my PC and vscode startup. After I refresh the page it appeares to be fine but happens again after another startup.

[ulrich00132]

Hi there. I have the same issue. I've tried all suggestion but none of those work. It's very annoying since it's for a client. And I've already did 97% of the work. Please help

[HaileQ]

@ulrich00132 try using the public domain to load resources for the page instead of the Vercel domain. Check to see if you have a bunch of js files that are not loading in your network tab, which are using Vercel deployed domain, if so, this might work for you.