Background:
We are have noticed that in production and in some staging environments, that the onClick handlers on a SSR page are failing to be called. By comparing working and non-working (npm run start) deployments we've determined that the non-working deployments are not calling the render() methods of the components on the page immediately after page reload, whereas the working deployments do. We are assuming that means that hydration is not occurring.
Development deployments (npm run dev) work flawlessly
We are seeing no browser-side console messages.
We are seeing no server side warnings
The npm build --debug suggests only to upgrade to the new ChunkGraph API. Otherwise no warnings.
We are now wondering...
QQ:
Short of starting with a fresh create-next-app again and gradually evolving the app towards our current implementation until it breaks, what are the suggested ways of determining the root cause(s) of a problem like this?
For some reason, my hydration issues only showed up in production, and only on the server. Running next build and next start didn't show any errors. Since user3624334's answer didn't really help me, I figured I'd reply with how I ended up finding the culprit.
Since I deploy to Vercel, and use Vercel's review apps, I ended up creating a Pull Request where I remove half of the page that was having the hydration issues, and continued bisecting until I found out which component was causing the issues. It took me three tries to find the component.
Once I had the component it was quite easy to figure out what was causing the issues (for me the hydration issue was caused by a timestamp being rendered in different ways).
This also explains why user3624334's answer didn't work for me, since I opened the page straight after building, at which point the time was still the same as during next build!
One challenge here is that it appears that when SSR page hydration fails in next.js, a warning message will not necessarily be generated.
I hope someone has a better suggestion than the following, but I will offer this human script that worked several times for me:
git checkout -b "hydration-problem-02" to create a branch for this effort
add a console.log('render called') to the top of the render() method of pages/_app.js. This should produce a message on each hydrate, making it easy to notice when the page does/does-not hydrate.
Then repeatedly:
simplify a significant portion of the app.
npm run dev to run in dev mode
confirm that your change did not break the app in unexpected ways
rm .next/ node_modules/ package-lock.json
npm install && npm run build && npm run start
confirm that the above command completed successfully
refresh the page in the browser
check for the message in the browser console.
git commit -am "msg that indicates what you changed and if it helped"
if the problem remains, repeat these steps
Doing the commits above should help make the process more fool-proof. Ex. If you think you might have forgotten to test in production mode, you can go back to that commit and retest to confirm you did not mis-test.
Once you have a working and non-working commit of the app, you can do a binary search for the error, either adding or removing smaller and smaller pieces of function.
The root causes of quiet hydration failures I've seen include:
two modules that mutually import each other
an import '..../bootstrap.js' in a component rather than _app.js
Related
I'm working in React on VSCode and installed Moment.js via npm. For reasons I'm sure are unrelated all of a sudden I started receiving console errors to the tune of this: console errors. After trying to solve the errors by working through some potentially troubling GSAP syntax, they all still remained. I used git reset --hard to get me back to a point at which I knew the app was fully functional but the errors have persisted. I don't know what could have happened! Here's the CodeSandbox, let me know if you spot anything funky!
Thanks,
Connor
Just recently I am starting to experience an issue when trying to deploy my functions through Firebase. When running the command firebase deploy --only functions one of my four functions deploy correctly, but the other three throw this error in the firebase-tools console:
Deployment error.
Build failed: Build error details not available. Please check the logs at url to my GCP logs
When I look at the logs the error message that shows for each function that is failing is:
ERROR: build step 3 "us.gcr.io/fn-img/buildpacks/nodejs10/builder:nodejs10_20200922_20_RC00" failed: step exited with non-zero status: 46
I have searched and googled for quite a while now and I cannot find anyone reporting the same error code, having the same non-zero status returned, or having functions fail on step 3. There doesn't seem to be much for documentation on troubleshooting the errors either.
Hopefully someone here can point me in the right direction.
Thanks!
The error seems to be caused by a missing (or not accessible) file in the history/restore functionality of Firebase. Don't know the reason for this.
A workaround that worked for me was:
Remove the functions in the web console
Deploy normally > firebase deploy
Answering since I can't comment in response to xaphod, Markus's fix worked for me, thank you mate! Deleting the function means it creates a new one rather than trying to restore it, which is the failed step 3 in the build process.
In response to xaphod, I did setup a lifecycle rule for old files in the artifacts bucket, it was by far my biggest bucket in storage and was pushing the free tier limit. I set it up a bit short probably, delete 5 days after last updated time, but surprisingly didn't run into this issue until today (possibly because I usually just deploy them all whenever I update one). I removed the lifecycle rule for now, although I'd rather it not run up the storage space again, I might end up contacting support to see if there's a way to lifecycle them without deleting the most recent, not sure why it doesn't just clear out the old images on updates though.
Found the post that suggested setting up lifecycle rules, firebase storage artifacts is huge, and did some testing as well, deleted all the files in us.artifacts and deployed all my functions (got errors on all them, only deleted the function that I needed to update earlier and deployed it by itself). Doesn't cause any errors, just takes a bit longer, so I think the issue can be fixed by deleting them all or deleting nothing, probably going to set the lifecycle rule to delete immediately and deal with the increased deploy time, rather than the cost of firebase storage.
I have a strange issue. I build my Meteor app and run it on android device using -
meteor run android-device --mobile-server=<my_aws_ip>:3000
When the app deploys immediately it connects to the server (and my javascripts etc works). After a few seconds, the page refreshs and none of the javascript callbacks work. Please help me debug this issue.
More information: If I change the client (and not the server), and deploy it, for the first few seconds, the changed client gets shown on the phone. After the first few seconds, the version which is present on the server is shown. So I think Cordova or Meteor is trying to fetch the client code from the server, which is breaking the app. Is there a way to prevent this behavior?
Even more data points -
My aws code does NOT have android and ios platforms installed. Because of this, I think the cordova plugins are not installed, causing a JS break somewhere.
Easiest fix I can think of is remove cordova autoupdate. This is being added by meteor-platform package. If I clone meteor-platform and comment out the cordova autoupdate, the app doesn't load.
Is there another way of removing autoupdate?
This sounds like you have a different version of your app deployed at the mobile-server address.
The local code is run in development mode. Your AWS one is likely in production mode (and may contain a syntax error).
When you run your app it sees the code is different and fetches the new/old (different) version with a hot code reload - hence the page refresh/flash.
To fix this, you need to find the syntax error in your code. It's best to view the ADB logger or run with meteor run --verbose android-device ....
This will provide a bit more information such as an Uncaught exception: cannot read .. of null error type error.
It's hard to say what the error is. The error prevents the rest of your code from executing. In production mode the entire project is one JS file. If there is an error of any kind half way along the file, the rest of the file will not execute.
Also, try loading <my_aws_ip>:3000 in your browser and watch for JS errors in the JS console.
You can also run it locally with --production to simulate a production build environment locally.
Enabling autoupdate but without a page refresh:
Reload._reload = function (options) {
console.log("Next load will load new version");
};
I have created my first meteor app today and am kind of stuck. Everything works extremely well on localhost:3000, very responsive etc. It is a simple task app, where users can post tasks to a feed that displays all tasks an then claim those tasks, removing them from the general feed and putting them into their personal feed. But when I deploy it to a meteor.com server, everything breaks.
This is the js file
https://github.com/valentin-zambelli/brokenjs/blob/master/mvp.js
Accounts.ui.config({
passwordSignupFields: "USERNAME_ONLY"
});
gets ignored and whenever I try to post a new task the page reloads, getting stuck on app.meteor.com/?text=some+new+task and doesnt display the task in the general taskfeed.
I have removed the insecure and autopublish package. Is there anything I am missing here? It kind of seems as if it uses an older, broken build. I also get the ReferenceError: Can't find variable: require when deploying, but I can't really figure out where this is coming from.
I hope someone can help me.
Ok, it was an insanely stupid mistake on my part: The mongodb was still in an older state and caused a conflict. If you have problems deploying your meteor app try
meteor deploy myapp.meteor.com -- delete
This will delete all resources on the server, including the database. Then do a simple
meteor deploy myapp.meteor.com
So I'm working on my Meteor project and all of a sudden everything stops working and my console reports that everything is 'undefined'. See screenshot. Why does this happen? Usually things will just randomly start working again after I reboot my machine or go get lunch.
This can happen if you have a hot code reload during when the page is loading from a previous hot code reload.
Your browser will eventually reconnect to the server, reconnect & refresh the page. In the case above it looks the the bit of Js that connects to the server doesn't get loaded to begin with (the DDP bit) so it doesn't behave as normal. If it reconnects it can fix it self by refreshing.
It's very hard to tell what exactly is causing it from the information you've given. I'd look at custom packages that replace core packages or some kind of of package you have that runs early on in your code that would stop the normal loading of a project.
If you're using meteor on windows there are a couple of bugs that do this too. I'm not sure how to get past those besides doing Ctrl+C to stop and then using meteor to start the project again.