Common JS, TypeScript and Dart errors
three languages, the same rakes
What it is
The JavaScript and TypeScript messages were obtained by running (Node 22, TypeScript 5.8). The Dart messages are given from memory and were not run — like the whole of chapter 11, they need checking against the documentation.
JavaScript at run time
TypeError: Cannot read properties of undefined (reading 'name')
The most frequent error in the whole frontend. A field was read from
something that isn't there: the data hasn't arrived yet, the key is called
something else, the array is empty. The cure is a check or ?., but first
you have to understand why it is undefined there.
TypeError: Cannot read properties of undefined (reading 'map')
The same thing in React: a list was rendered before the data arrived. A
sign that the "loading" state wasn't built (article 10.5).
TypeError: Cannot set properties of null (setting 'textContent')
The element wasn't found. The script ran before the browser built the page,
or the selector is wrong.
TypeError: xs.push2 is not a function
The method doesn't exist. A typo — or an invented method (article 4.8).
TypeError: d is not iterable
Iterating over something that isn't an array: undefined, an object,
null.
TypeError: Assignment to constant variable.
A value was assigned to a const. Changing an object's contents is
allowed, reassigning the variable isn't.
ReferenceError: cuty is not defined
The name doesn't exist. Unlike in Python, in the browser this sometimes
means the script didn't load.
SyntaxError: Unexpected end of JSON input
JSON.parse on an empty string. Usually the server's response is empty
because the request never arrived.
SyntaxError: await is only valid in async functions and the top level bodies of modules
An await in an ordinary function. Either make the function async or
work through .then.
TypeError: Failed to fetch
The request didn't happen. There is no error in the code: the real cause is
in the browser console, most often CORS (article 14.3).
TypeScript at check time
error TS2741: Property 'temp' is missing in type '{ name: string; }' but required in type 'City'
A field is missing. Either the field should be optional (temp?), or it
really was forgotten.
error TS2322: Type 'string' is not assignable to type 'number'
The value is the wrong type. The classic: a number that arrived as a
string.
error TS2345: Argument of type 'number' is not assignable to parameter of type 'string'
The same thing in a function argument.
error TS18048: 'd' is possibly 'undefined'
The value may be absent and is being used directly. The right answer is a
check, not a ! (article 9.5).
error TS18047: 'c.temp' is possibly 'null'
The same for null. It appears exactly where the types are described
honestly — and that is a sign of good code, not of a problem.
error TS2339: Property 'b' does not exist on type '{ a: number; }'
The field isn't in the type. Either a typo, or the type is described
incompletely — and then the type is what needs fixing, not gagging it with
as any.
Dart and Flutter
Null check operator used on a null value
A ! was put where the value turned out to be empty. The direct analogue
of as in TypeScript and the same kind of gag (article 11.2).
LateInitializationError: Field 'x' has not been initialized
The field was declared late and nobody remembered to assign it.
setState() called after dispose()
The widget is already gone and a network response arrives and tries to
update the screen. A sign the subscription wasn't closed in dispose
(article 11.4).
RenderFlex overflowed by N pixels
That yellow-and-black stripe: the content doesn't fit. The cure is
Expanded or Flexible (article 11.3).
The method 'X' isn't defined for the type 'Y'
The method isn't there. In Flutter that most often means code for another
version: the stack's main disease.
What they have in common
Three quarters of the list is one and the same error in three languages:
something that isn't there was used. None, null, undefined, a
missing key, an empty array.
So the technique is the same in every stack: not "add a check where it crashed" but go higher and answer why it is empty there — and handle it where the data appears.
Cheat sheet
Read the last line: it says what happened.
undefined (reading '...')— the data hasn't arrived or the key is different.Failed to fetch— the cause is in the browser console, not in the code.possibly 'undefined'in TypeScript is a sign of honest types, not a problem.!in Dart andasin TypeScript are the same gag.Nearly everything in the list is one error: using something that isn't there.