JavaScript — Cannot Assign to Read Only Property

What Does This Error Mean?

This error means you tried to change a property that JavaScript has been told cannot be changed. Some objects have properties that are 'locked' — they can be read but not overwritten. This is a deliberate protection, not a bug in JavaScript itself.

Affected Models

All browsers
Node.js
Deno
Any JavaScript runtime

Common Causes

Trying to modify a property on a frozen object (Object.freeze() was used)
Attempting to change a property defined with writable: false using Object.defineProperty()
Modifying a property on an object from a library that has been made immutable
Working with React state directly instead of using the setState function
Trying to reassign a built-in property like length on a string

How to Fix It

Find the line causing the error. It will be the line where you are assigning a value to a property using the = sign.

The error message will say which property name is read-only. Use that to trace back to where the object was created.
Check if the object was frozen with Object.freeze(). If so, you cannot modify any property on it. You will need to create a new object with the changes instead.

Example: instead of myObj.name = 'new name', use: myObj = { ...myObj, name: 'new name' } to create a new object.
If you are using React, never modify state directly. Use the setState function or the state setter from useState.

Wrong: this.state.count = 5; Right: this.setState({ count: 5 }); or setCount(5) with hooks.
If the property was defined with Object.defineProperty(), check the writable setting. To make it writable, redefine it with writable: true.

Example: Object.defineProperty(myObj, 'name', { writable: true, value: 'Alice' });
If a third-party library returned the object, check its documentation. The library may have intentionally made the object read-only, and you may need to clone it before modifying.

A shallow clone can be made with: let newObj = { ...originalObj }; — this creates a new writable copy.

When to Call a Professional

This error usually points to a design choice in the code or a misunderstanding of how a library works. For React-specific cases, the React documentation explains state management clearly. No professional help is typically needed — reading the relevant documentation is the best next step.

Frequently Asked Questions

Why would anyone want a read-only property?

Read-only properties are used to protect important data from being accidentally changed. For example, a library might freeze its configuration object so your code cannot accidentally break it. In React, state is kept immutable so React can efficiently track what changed and update the screen. Immutability also makes code easier to debug because you always know what changed data.

How do I check if an object is frozen?

Use Object.isFrozen(myObj) — it returns true if the object is frozen, false if it is not. You can use this before trying to modify an object to decide whether to clone it first.

What is the spread operator and how does it help here?

The spread operator (...) copies all properties from one object into a new object. Example: let newObj = { ...oldObj, name: 'changed' }; creates a completely new, unfrozen object with all the same properties, but with name changed. Since the new object is not frozen, you can modify it freely.