Type is not assignable to type
A value’s type doesn’t match what the variable, prop, or function expects, often because the value might be missing or is the wrong kind.
Also appears as
- Type 'string | null' is not assignable to type 'string'. Type 'null' is not assignable to type 'string'.ts(2322)
- error TS2345: Argument of type 'string | undefined' is not assignable to parameter of type 'string'.
- Type '{ title: string; }' is not assignable to type 'IntrinsicAttributes & CardProps'. Property 'title' does not exist on type 'IntrinsicAttributes & CardProps'.
- ./src/app/page.tsx:8:9 Type error: Type 'string | undefined' is not assignable to type 'string'.
Prompt to fix it
TypeScript reports "Type ... is not assignable to type ..." (TS2322). Read the full error, including the indented lines, and explain which part doesn’t fit. Fix it at the source: handle undefined and null with a check, a sensible default, or a clear error for missing required settings; await promises; and update prop or function types when the declared type is wrong. Don’t silence it with as casts, non-null assertions (!), any, or @ts-ignore. Run the project’s type check or build afterward.
Paste into Layerwise or any AI coding tool.
What it means
TypeScript compares the type of a value with the type of the place you put it: a variable, a component prop, a function argument, or a return value. TS2322 means they don’t fit. The indented lines underneath say which part fails. In Type 'undefined' is not assignable to type 'string', the problem is that the value might be undefined.
That “might be missing” case is the most common one. process.env.STRIPE_SECRET_KEY is typed string | undefined, because the variable could be unset. searchParams.get('q') and localStorage.getItem() return string | null, and nullable database columns arrive as null. TypeScript wants you to say what happens in that case before you use the value as a string.
The quick fixes hide real bugs. A ! after the value or an as string cast tells TypeScript to trust you, and the app crashes later when the value really is missing. Check for it, give it a sensible default, or fail early with a clear message, like a startup check that names the missing environment variable.
Common causes
- An environment variable, URL parameter, or
localStoragevalue is used where a plainstringis required. - A component gets a prop its type doesn’t declare, or a prop of the wrong type, such as a number where it expects a string.
- A nullable database column is assigned to a field whose type doesn’t allow
null. - A function returns a
Promise, and the code uses the result withoutawait. - A plain string goes where a fixed set of values is expected, such as
'large'for a prop typed'sm' | 'md' | 'lg'.
How to fix it
- Read the last indented line first. It names the exact part that doesn’t fit.
- If
undefinedornullis the problem, handle it: return early, use a default likevalue ?? '', or throw a clear error when a required setting is missing. - If a prop doesn’t fit, update the component’s props type or pass the value it expects.
- If the value is a
Promise, addawaitbefore the call that returns it. - Fix the type where the value is created, and skip
ascasts,!, and@ts-ignore, which only hide the mismatch.
Example fix
// Server code: process.env values are string | undefined until checked.
function requireEnv(name: string): string {
const value = process.env[name];
if (!value) throw new Error(`Missing environment variable: ${name}`);
return value;
}
const stripeSecretKey: string = requireEnv('STRIPE_SECRET_KEY');
// Browser code: URL parameters can be missing, so pick a default.
const query: string =
new URLSearchParams(window.location.search).get('q') ?? '';Related errors
All errorsProperty does not exist on type
TypeScript can’t find that field on the type it has for this value, either because the type is wrong or because the value might not have it.
Cannot read properties of undefined
The code asked for a property of a value that doesn’t exist yet, usually data that hasn’t loaded or a field the API didn’t return.
Command "npm run build" exited with 1
Your build script failed on the host. This line only reports the failure; the actual error is printed earlier in the build log.
Cannot find module
Node tried to load a package or file that isn’t where the code says it is, usually because it was never installed or the path is wrong.
Build with an agent that checks its work
The Layerwise agent clicks through the live preview and reads the console, so it catches errors before you do.