vibeart commented 2 years ago

🐞 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] commented 2 years ago

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 commented 2 years ago

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 commented 2 years ago

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 commented 2 years ago

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

mimukit commented 2 years ago

Facing the same issue.

Btw, thanks @TheBinaryGuy for the temporary solution. 🎉

Mussakova commented 2 years ago

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 commented 2 years ago

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

bernardm commented 2 years ago

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 commented 2 years ago

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 commented 2 years ago

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 commented 1 year ago

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 commented 1 year ago

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

GBG7 commented 1 year ago

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 commented 1 year ago

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

isrd1 commented 1 year ago

@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 commented 1 year ago

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 commented 1 year ago

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 commented 1 year ago

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 commented 1 year ago

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 commented 1 year ago

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 commented 1 year ago

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

Shahindavoodicom commented 1 year ago

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 commented 1 year ago

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 commented 1 year ago

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

Antenna00 commented 12 months ago

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 commented 8 months ago

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 commented 8 months ago

@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.