El día que un mal JSON me rompió todo el frontend (y cómo lo recuperé) - Episodio 40

Un mal dia con JSON lo puede tener cualquiera

¿Te ha pasado que algo tan pequeño como una coma te deja todo React en blanco?

Ese día quería hacer una pequeña modificación en el package.json de mi frontend React.

Solo tenía que añadir un script para lanzar el servidor con un comando personalizado.

Pero cometí un error típico: lo edité a mano, sin verificar el formato.

Spoiler: fue un caos.

React no arrancaba, el terminal no decía mucho, y yo estaba completamente a oscuras.

 

🤕 El error que lo rompió todo: JSON mal formado. 📅 Diario de un SaaS

Mi intención era añadir un nuevo script en el bloque scripts de package.json, algo como esto:

"scripts": {
  "start": "react-scripts start",
  "dev": "vite"
}

Pero cometí un error de sintaxis: olvidé una coma al final del primer script, o puse una coma donde no debía.

El resultado fue un package.json inválido, y el sistema dejó de funcionar:

npm ERR! Failed to parse json
npm ERR! Unexpected string in JSON at position 198

Y ahí empezó mi odisea.

🔍 ¿Por qué este error es tan crítico?

El archivo package.json es el corazón de cualquier proyecto Node.js.

Contiene:

• Scripts de ejecución (start, build, dev...)
• Dependencias y versiones
• Nombre, descripción y configuración del proyecto

Un solo carácter mal (una coma, una llave de más o de menos) y nada funciona. Y lo peor: los mensajes de error de npm a veces no son muy claros.

🛠 Cómo lo solucioné (paso a paso)

1. Verifiqué el archivo con un validador

Usé https://jsonlint.com para pegar el contenido de mi package.json y comprobar dónde estaba el error.

2. Formateé el archivo correctamente

Volví a escribir el bloque scripts así:

"scripts": {
  "start": "react-scripts start",
  "dev": "vite"
},

Me aseguré de:

• Poner comas solo entre elementos, no al final del último.
• Que cada cadena estuviera entre comillas dobles ".
• Que las llaves estuvieran cerradas correctamente.

3. Probé de nuevo con npm start

Y funcionó.

React arrancó como si nada hubiera pasado.

Respiré.

Y luego me puse a documentarlo TODO.

🧠 Conceptos y relaciones clave (para enlazado interno)

🔹 package.json

Archivo central en proyectos Node.js.

Relacionar con post sobre estructura y funciones clave del archivo.

🔹 CRA (Create React App) vs Vite

Al usar CRA, los scripts por defecto usan react-scripts.

Así que con Vite, usas vite directamente.

🔹 Debugging en proyectos frontend

Los errores de sintaxis en JSON pueden bloquear el arranque del proyecto.

Por lo que saber interpretar logs es clave.

💡 Lecciones aprendidas

🔸 No edites package.json a ciegas

Siempre usa un editor que te valide la sintaxis o una herramienta como jsonlint.

🔸 React es frágil si la base no está bien

Puedes tener todo montado y listo, pero si tu package.json falla, se acabó la fiesta.

🔸 Documenta los cambios y usa control de versiones

Gracias a Git pude comparar con versiones anteriores y restaurar si algo salía mal.

🧪 Tip extra: Cómo validar JSON desde consola

Si estás en Linux o Mac, puedes usar:

cat package.json | jq .

Y si el archivo es inválido, jq te lo dirá al instante.

🧠 Cierre del día

Ese día aprendí que una coma fuera de lugar puede tirar abajo toda tu app.

Literal amigo.

Pero también aprendí que hay formas fáciles de detectar errores, prevenirlos y solucionarlos rápido.

Ahora cada vez que toco package.json, lo valido.

Lo mimo.

Porque sé que ahí empieza todo.

💬 ¿Alguna vez una tontería como esta te ha roto un proyecto entero?

Cuéntamelo en los comentarios.

Y no te preocupes, te leo sin juzgar 😅

Si quieres conocer otros artículos parecidos a El día que un mal JSON me rompió todo el frontend (y cómo lo recuperé) - Episodio 40 puedes visitar la categoría Proyecto-IA.