How to fix hydration errors in Next.js? - reactjs

I'm receiving these two errors, but it doesn't tell me where to fix this problem
https://reactjs.org/docs/error-decoder.html/?invariant=418
https://reactjs.org/docs/error-decoder.html/?invariant=423
[Update] it looks like the error is in here
(b=3!==a.tag)&&!(b=5!==a.tag)&&(b=a.type,b="head"!==b&&"body"!==b&&!Ef(a.type,a.memoizedProps));if(b&&(b=yg)){if(Dg(a))throw Hg(),Error(p(418));for(;b;)Ag(a,b),b=Lf(b.nextSibling)}Fg(a);if(13===a.tag){a=a.memoizedState;a=null!==a?a.dehydrated:null;if(!a)throw Error(p(317));a:{a=a.nextSibling;for(b=0;a;){if(8===a.nodeType){var c=a.data;if("/$"===c){if(0===b){yg=Lf(a.nextSibling);break a}b--}else"$"!==c&&"$!"!==c&&"$?"!==c||b++}a=a.nextSibling}yg=

It tells you how to fix the problem: you should fix it (running minified react without sourcemaps) before you can see the error in your code.
The links you are given are accurate.

Related

List JS: `TypeError: list.templater is undefined`

I'm wondering if anyone has had an issue with or can help with TypeError: list.templater is undefined when using list.js, and how they solved it? A clue might be that I'm also getting an Source Map URL: list.js.map 404 / not found error.
If there's another better-used / better-documented package that does something similar to list.js, I'd definitely be open to that too.
Perhaps this question was a bit too much information, but it gives more context to what's going on.

Can't find variable : Dimensions

I've been getting this error in the project since I pulled expo to version 44.
The error image is attached.
What I tried could not solve the problem?
Check you have dimensions or not. Also check where the component dimension is coming from.
ReactNative/Expo errors stack error cause snippets are most time misleading. Make use that your code does not use Dimensions API - actual device width and height without importing it. via #BYIRINGIRO Emmanuel

React native Calendar Picker invalid argument supplied to oneOfType

I am using react-native-calendar-picker from github to use a calendar in my app. The problem it's that everytime I run it, I get some warnings like:
As seen there, there's something about node_modules\react-native-calendar-picker\CalendarPicker\DaysGridView.js , and there are 4 warning, with rows 254,255,256 and 248. Going to that file, I found that those lines are:
So, the problems seems to be somewhere at selectedRangeStartStyle, selectedDayStyle and selectetRangeStyle which I have setted in my componenet with #XXXXXX, as hex color codes. Any help would be appreciated, thanks!
I am also getting the same warning because of those lines. It was a change introduced by this commit https://github.com/stephy/CalendarPicker/commit/081a07f6c95fc178d17295ef0cd3f68f2b7d117f to fix this issue https://github.com/stephy/CalendarPicker/issues/246
Reverting the changes locally on the file stopped the error from popping up in my console, but that is just a quick workaround i found for now only.

React-Images and React-Photo-Gallery Compile Error

I am trying to install React-Photo-Gallery and React-Images to get a lightbox gallery.
I am getting this error:
Error in ./~/react-scrolllock/dist/index.js
Module not found: [CaseSensitivePathsPlugin] /Users/anmareewilliams/Apps/anmaree/anmaree/node_modules/react-scrolllock/dist/Scrolllock.js does not match the corresponding path on disk ScrollLock.js.
# ./~/react-scrolllock/dist/index.js 7:18-41
I am not sure what I did wrong because I didn't touch anyting related to the Scrolllock and I am seeing that the Scrolllock.js is in fact named dist/ScrollLock.js
Any help would be much appreciated.
Thank you.
You haven't done anything wrong so far.
React-Images is using an old version of react-scrollock (4.0.1 latest is 5.0.0), which might be a problem.

IE error with rallyGrid

I'm getting an error with an SDK2.0 app using a rally custom grid:
It only errors with IE (current), and it does not error if I run it locally, only when I install it in Rally and run it.
I don't know if its a Rally issue, or a EXTJS issue.
SCRIPT5007: Unable to get value of the property 'modelField': object is null or undefined
sdk.js, line 4 character 1276692
The code that failed:
if(e.modelField&&e.modelField.hidden)
Context around that error:
{xtype:"rallytextfield",allowBlank:false,removeNameAttribute:true}}},PortfolioItem:function(){return{hidden:true}},AttributeType:function(b){return a.apply(Rally.ui.grid.FieldColumnFactory.defaultRenderer(b),{sortable:false})}})})();(function(){var a=window.Ext4||window.Ext;var b=function(g,e){var d=g.text;var c=e.text;if(d>c){return 1}if(d<c){return -1}return 0};a.define("Rally.ui.grid.ColumnBuilder",{requires:["Ext.Array","Ext.util.Format","Rally.ui.grid.FieldColumnFactory"],constructor:function(){this.defaultColumns=[];this.autoAddAllModelFieldsAsColumns=true},withDefaultColumns:function(c){if(a.isArray(c)){this.defaultColumns=this.defaultColumns.concat(c)}return this},withSortableColumns:function(c){this.sortable=c;return this},shouldAutoAddAllModelFieldsAsColumns:function(c){this.autoAddAllModelFieldsAsColumns=c;return this},build:function(d){var e=a.Array.map(this.defaultColumns,function(g){if(a.isString(g)){return Rally.ui.grid.FieldColumnFactory.getColumnConfigFromField(d.getField(g),this.sortable)}return g},this);if(this.autoAddAllModelFieldsAsColumns){var c=this._buildModelColumns(d,this.defaultColumns,e);e=e.concat(c)}this._removeHiddenColumns(e);return this._stripTagsFromColumnText(e)},_removeHiddenColumns:function(d){for(var c=d.length-1;c>0;c--){var e=d[c];if(e.modelField&&e.modelField.hidden){a.Array.erase(d,c,1)}}}
Not sure what other guidance I can provide to help locate this issue.
The code was a bit large, so I started to do some divide and conquer before I posted it and I found the cause in my code, though probably not the root cause:
In my columnCfgs when adding the rallygrid, I had a trailing ',' on the last entry.
The really annoying thing is this works in all browsers locally, but only fails in IE on Rally with a super obscure error, so its really hard to chase down...even my JavaScript syntax highlighter did not warn me...
I suspect this is actually a problem in either Rally or EXT-JS code where IE is just really finicky...

Resources