Meteor Cannot Read Property 'prototype' of Undefined Graceful-fs
Got an mistake like this in your React component?
Cannot read property `map` of undefined
In this mail service we'll talk about how to prepare this 1 specifically, and along the way you lot'll acquire how to approach fixing errors in full general.
We'll cover how to read a stack trace, how to interpret the text of the error, and ultimately how to fix information technology.
The Quick Fix
This error usually means you're trying to use .map on an array, but that array isn't divers withal.
That's frequently because the array is a piece of undefined state or an undefined prop.
Make sure to initialize the country properly. That means if it volition eventually exist an assortment, use useState([]) instead of something like useState() or useState(null).
Let's look at how we tin can translate an error message and track downward where it happened and why.
How to Find the Error
Beginning order of business organisation is to figure out where the mistake is.
If yous're using Create React App, it probably threw upwardly a screen similar this:
TypeError
Cannot read property 'map' of undefined
App
6 | return (
vii | < div className = "App" >
8 | < h1 > List of Items < / h1 >
> 9 | {items . map((detail) => (
| ^
10 | < div key = {particular . id} >
11 | {item . proper name}
12 | < / div > Look for the file and the line number first.
Here, that'due south /src/App.js and line 9, taken from the calorie-free grayness text higher up the lawmaking block.
btw, when you lot see something like /src/App.js:nine:13, the way to decode that is filename:lineNumber:columnNumber.
How to Read the Stack Trace
If you're looking at the browser panel instead, you'll need to read the stack trace to figure out where the error was.
These e'er look long and intimidating, only the play a joke on is that usually you can ignore most of it!
The lines are in social club of execution, with the about recent first.
Here's the stack trace for this error, with the but of import lines highlighted:
TypeError: Cannot read property 'map' of undefined at App (App.js:9) at renderWithHooks (react-dom.development.js:10021) at mountIndeterminateComponent (react-dom.development.js:12143) at beginWork (react-dom.development.js:12942) at HTMLUnknownElement.callCallback (react-dom.evolution.js:2746) at Object.invokeGuardedCallbackDev (react-dom.development.js:2770) at invokeGuardedCallback (react-dom.development.js:2804) at beginWork $1 (react-dom.development.js:16114) at performUnitOfWork (react-dom.evolution.js:15339) at workLoopSync (react-dom.evolution.js:15293) at renderRootSync (react-dom.development.js:15268) at performSyncWorkOnRoot (react-dom.development.js:15008) at scheduleUpdateOnFiber (react-dom.development.js:14770) at updateContainer (react-dom.evolution.js:17211) at eval (react-dom.development.js:17610) at unbatchedUpdates (react-dom.development.js:15104) at legacyRenderSubtreeIntoContainer (react-dom.evolution.js:17609) at Object.render (react-dom.development.js:17672) at evaluate (index.js:seven) at z (eval.js:42) at G.evaluate (transpiled-module.js:692) at be.evaluateTranspiledModule (director.js:286) at exist.evaluateModule (manager.js:257) at compile.ts:717 at 50 (runtime.js:45) at Generator._invoke (runtime.js:274) at Generator.forEach.east. < computed > [as adjacent] (runtime.js:97) at t (asyncToGenerator.js:3) at i (asyncToGenerator.js:25) I wasn't kidding when I said you could ignore most of it! The first 2 lines are all we care about here.
The beginning line is the mistake message, and every line after that spells out the unwound stack of function calls that led to information technology.
Let'south decode a couple of these lines:
Hither we accept:
-
Appis the proper noun of our component function -
App.jsis the file where it appears -
ixis the line of that file where the mistake occurred
Let's wait at some other i:
at performSyncWorkOnRoot (react-dom.evolution.js:15008) -
performSyncWorkOnRootis the proper noun of the part where this happened -
react-dom.evolution.jsis the file -
15008is the line number (it'due south a large file!)
Ignore Files That Aren't Yours
I already mentioned this just I wanted to country it explictly: when you're looking at a stack trace, you can almost e'er ignore any lines that refer to files that are outside your codebase, like ones from a library.
Unremarkably, that means you lot'll pay attention to only the beginning few lines.
Scan downward the list until it starts to veer into file names you don't recognize.
There are some cases where you do care about the total stack, but they're few and far between, in my experience. Things like… if you suspect a bug in the library you're using, or if you think some erroneous input is making its fashion into library code and blowing upwardly.
The vast majority of the time, though, the bug will be in your ain code ;)
Follow the Clues: How to Diagnose the Mistake
So the stack trace told u.s. where to look: line 9 of App.js. Allow's open that up.
Hither'due south the full text of that file:
import "./styles.css" ; consign default function App () { permit items ; return ( < div className = "App" > < h1 > List of Items </ h1 > { items . map ( detail => ( < div fundamental = { detail .id } > { item .name } </ div > )) } </ div > ) ; } Line nine is this one:
And just for reference, here's that error message again:
TypeError: Cannot read property 'map' of undefined Permit's interruption this down!
-
TypeErroris the kind of error
There are a handful of built-in error types. MDN says TypeError "represents an error that occurs when a variable or parameter is non of a valid blazon." (this part is, IMO, the least useful office of the error message)
-
Cannot read propertyways the code was trying to read a property.
This is a good clue! In that location are only a few ways to read backdrop in JavaScript.
The almost common is probably the . operator.
As in user.name, to admission the name property of the user object.
Or items.map, to access the map belongings of the items object.
At that place's also brackets (aka square brackets, []) for accessing items in an assortment, similar items[5] or items['map'].
You might wonder why the error isn't more specific, similar "Cannot read function `map` of undefined" – but remember, the JS interpreter has no idea what we meant that type to exist. Information technology doesn't know information technology was supposed to be an array, or that map is a function. It didn't get that far, because items is undefined.
-
'map'is the property the code was trying to read
This one is some other dandy clue. Combined with the previous bit, you tin can be pretty sure yous should be looking for .map somewhere on this line.
-
of undefinedis a clue well-nigh the value of the variable
It would exist way more than useful if the error could say "Cannot read property `map` of items". Sadly it doesn't say that. Information technology tells you the value of that variable instead.
So now you lot tin piece this all together:
- observe the line that the error occurred on (line 9, here)
- scan that line looking for
.map - wait at the variable/expression/whatever immediately before the
.mapand be very suspicious of it.
Once yous know which variable to wait at, you can read through the function looking for where information technology comes from, and whether it'southward initialized.
In our little example, the merely other occurrence of items is line iv:
This defines the variable merely it doesn't set up it to anything, which means its value is undefined. There'southward the problem. Fix that, and yous fix the error!
Fixing This in the Real World
Of course this example is tiny and contrived, with a simple mistake, and it'south colocated very shut to the site of the mistake. These ones are the easiest to set up!
There are a ton of potential causes for an error like this, though.
Possibly items is a prop passed in from the parent component – and you forgot to laissez passer it down.
Or maybe you did pass that prop, but the value beingness passed in is actually undefined or null.
If it's a local land variable, perhaps you lot're initializing the country every bit undefined – useState(), written like that with no arguments, will do exactly this!
If it's a prop coming from Redux, mayhap your mapStateToProps is missing the value, or has a typo.
Whatsoever the example, though, the procedure is the same: commencement where the error is and work backwards, verifying your assumptions at each point the variable is used. Throw in some console.logs or use the debugger to inspect the intermediate values and effigy out why information technology's undefined.
You'll go it stock-still! Skillful luck :)
Success! At present check your email.
Learning React can exist a struggle — and so many libraries and tools!
My advice? Ignore all of them :)
For a step-by-step approach, check out my Pure React workshop.
Larn to think in React
- xc+ screencast lessons
- Full transcripts and closed captions
- All the code from the lessons
- Developer interviews
Start learning Pure React now
Dave Ceddia's Pure React is a work of enormous clarity and depth. Hats off. I'm a React trainer in London and would thoroughly recommend this to all front end cease devs wanting to upskill or consolidate.
Alan Lavender
@lavenderlens
Meteor Cannot Read Property 'prototype' of Undefined Graceful-fs
Source: https://daveceddia.com/fix-react-errors/
0 Response to "Meteor Cannot Read Property 'prototype' of Undefined Graceful-fs"
Post a Comment