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
Related
I am running Gatsby + WP and have not seen this error until updating my gatsby-source-wordpress plugin.
The error message does not give me any information about where this is occuring so I am compeltely stuck.
I tried simply clearing my cache but that didn't do anything.
I am not getting errors in my local environment, but I when I push this to Gatsby cloud the build fails and gives me the message.
I am not sure if my answer will be helpful to you. But I had the same error when I pushed my code which worked fine in my local environment.
After spending some time debugging, I realised that the problem that stopped building wasn't related to the error message at all.
After I fixed the bug I still got the same error but the build succeed. So I recommend you try to check another factor that might cause the build to fail.
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
I installed Meteor (p.s I'm new to app developement) onto my laptop (running Windows 10) and have created an app for which I have downloaded packages for (materialize, accounts-ui and passwords). The problem that I'm facing is that whenever I make changes to the html,css or js files, I get "client-modified" on my terminal, but it never actually refreshes. It's just stuck there in a loop after no matter how many modifications I make. Is this due to the current Meteor version I have installed (1.2.1)?
=> Client modified -- refreshing
This happened to me also, yesterday and today, that's how I found this question.
My observations are:
check if the app is running and working despite the apparent hang. If it does, try making a simple change in a html or template file and see if the app auto-updates. It did for me, but your mileage may vary.
If it gets too annoying, you can always just kill and restart the app. Shouldn't take too long. Check if this improves the situation.
If 2. does not help you may try "meteor reset" to clean things up, but ONLY if you just started developing your app and don't care about losing any app data (MongoDB get's wiped along with the rest of the /.meteor/local folder)
Hope the above helps...
Norbert
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
I have been trying to figure out an issue with spiderable for several hours now. I have it installed and running beautifully on my local machine, but once I deploy to production I get this error spiderable: phantomjs failed: null. As you can see, this is not very helpful in debugging the issue.
I have followed all the advice in this excellent post on Meteorpedia, but to no avail:
http://www.meteorpedia.com/read/spiderable/
To make it even more strange, when I run the phantomtest.js script found on the page linked above, everything runs without any issue.
What I would really like to do is to be able to log some debug output from PhantomJS as it's being called by spiderable, but I have no idea if that's even possible. I tried messing around with spiderable code to pass some additional debugging parameters to PhantomJS, but that didn't work for me.
Any input would be greatly appreciated.