Programming with AI
ENRU
D

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 and as in TypeScript are the same gag.

  • Nearly everything in the list is one error: using something that isn't there.