How to Fix the `TypeError: Attempted to Assign to Readonly Property` Error

If you’ve encountered the following error in your Next.js codebase or any JavaScript codebase:

TypeError: Attempted to assign to readonly property

Don’t worry! This error is not specific to Next.js and can occur in any JavaScript project. After some debugging, I discovered that the issue was related to a database column where I stored data as JSON.

The problem arose when I tried to update this JSON object using dot syntax (e.g., data.name = 'Flavio'), without first calling the JSON.parse() function.

As it turned out, the data variable was a string rather than an object. In JavaScript, strings are immutable, meaning they cannot be modified once defined. This is why the error occurred. The solution is straightforward - simply call JSON.parse() before attempting to update the JSON object.

By applying this correction, you can resolve the TypeError: Attempted to assign to readonly property error and ensure the smooth functioning of your code.