DEV Community: Erick Eduardo Ramos

Cómo solucionar el error “Text content does not match server-rendered HTML” en Next.js App Router

Erick Eduardo Ramos — Wed, 12 Aug 2026 09:55:24 +0000

Cómo solucionar el error “Text content does not match server-rendered HTML” en Next.js App Router

Este error ocurre cuando el HTML generado en el servidor (SSR/SSG) no coincide con el árbol de React que se genera durante la primera renderización en el cliente (hydration). React detecta una inconsistencia crítica y detiene la hidratación para evitar comportamientos impredecibles.

Causa raíz

En tu caso, el problema no es un error de lógica de renderizado obvio (como <p> anidado en otro <p>), sino una diferencia temporal o contextual entre el servidor y el cliente. Las causas más probables:

Uso de Date.now(), new Date(), o Math.random() en el renderizado.
Acceso directo a window, localStorage, navigator, etc. durante la renderización.
Uso de typeof window !== 'undefined' dentro del cuerpo del componente (no dentro de useEffect o useMemo).
Metaetiqueta format-detection de iOS activa → convierte números de teléfono en <a> → rompe el DOM.
Extensiones del navegador (ej. traductores, dark mode) modificando el DOM antes de la hidratación.
Configuración de CDN (Cloudflare Auto Minify, etc.) que altera el HTML prerenderizado.

Solución definitiva (pasos verificados)

✅ Paso 1: Busca y elimina dependencias de tiempo o contexto del renderizado

❌ Mal:

// ❌ ¡Esto rompe la hidratación!
export default function Page() {
  const now = new Date(); // ❌ El servidor y el cliente tienen hora distinta
  return <p>Última actualización: {now.toLocaleString()}</p>;
}

✅ Bien (opción 1: renderiza placeholder en SSR, luego actualiza):

import { useState, useEffect } from 'react';

export default function Page() {
  const [now, setNow] = useState<string>('Cargando...');

  useEffect(() => {
    setNow(new Date().toLocaleString());
  }, []);

  return <p>Última actualización: {now}</p>;
}

✅ Bien (opción 2: usa suppressHydrationWarning solo si es inevitable):

export default function Page() {
  return (
    <p>
      Última actualización: 
      <time 
        suppressHydrationWarning 
        dateTime={new Date().toISOString()}
      >
        {new Date().toLocaleString()}
      </time>
    </p>
  );
}

⚠️ Pro-tip: suppressHydrationWarning solo debe usarse en elementos específicos, nunca en el <body> o <html>. React ignora solo ese nodo durante la comparación.

✅ Paso 2: Deshabilita detección automática de iOS (¡frecuente causa silenciosa!)

Agrega esta metaetiqueta en <head> de app/layout.tsx (o app/layout.tsx si usas App Router):

// app/layout.tsx
export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="es">
      <head>
        {/* 👇 SOLUCIÓN CLAVE PARA iOS */}
        <meta name="format-detection" content="telephone=no, date=no, email=no, address=no" />
      </head>
      <body>{children}</body>
    </html>
  );
}

🔍 ¿Por qué? iOS convierte automáticamente números como 1-800-555-0199 en <a href="tel:...">. Esto modifica el DOM prerenderizado → mismatch.

✅ Paso 3: Evita APIs del navegador en render

❌ Mal:

export default function Page() {
  const isMobile = typeof window !== 'undefined' && window.innerWidth < 768; // ❌
  return <div>{isMobile ? 'Móvil' : 'Escritorio'}</div>;
}

✅ Bien (con useEffect + estado):

import { useState, useEffect } from 'react';

export default function Page() {
  const [isMobile, setIsMobile] = useState(false);

  useEffect(() => {
    const checkMobile = () => setIsMobile(window.innerWidth < 768);
    checkMobile();
    window.addEventListener('resize', checkMobile);
    return () => window.removeEventListener('resize', checkMobile);
  }, []);

  return <div>{isMobile ? 'Móvil' : 'Escritorio'}</div>;
}

✅ Alternativa (recomendada en App Router): usa headers().get('User-Agent') en el servidor:

// app/page.tsx (Server Component)
import { headers } from 'next/headers';

export default function Page() {
  const headersList = headers();
  const ua = headersList.get('user-agent') || '';
  const isMobile = /Mobi|Android/i.test(ua);

  return <div>{isMobile ? 'Móvil' : 'Escritorio'}</div>;
}

✅ Paso 4: Verifica configuración de CDN

Si usas Cloudflare, Vercel Edge Config, o cualquier proxy intermedio:

Cloudflare: Desactiva Auto Minify (HTML) y Rocket Loader.
Vercel: Asegúrate de no tener vercel dev con --turbo (puede alterar SSR).
Otros: Busca reglas que modifiquen Content-Type: text/html (ej. reglas de reescritura, optimización de imágenes en HTML, etc.).

Bloque de código corregido (ejemplo completo)

// app/page.tsx
import { headers } from 'next/headers';

export default function Page() {
  // ✅ Seguro: se evalúa en el servidor
  const ua = headers().get('user-agent') || '';
  const isMobile = /Mobi|Android/i.test(ua);

  return (
    <div>
      <h1>Estado: {isMobile ? 'Móvil' : 'Escritorio'}</h1>
      <p>
        Última actualización: 
        <time 
          suppressHydrationWarning 
          dateTime={new Date().toISOString()}
        >
          {new Date().toLocaleString()}
        </time>
      </p>
    </div>
  );
}

// app/layout.tsx
export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="es">
      <head>
        {/* ✅ Previene iOS from modifying DOM */}
        <meta name="format-detection" content="telephone=no, date=no, email=no, address=no" />
      </head>
      <body>{children}</body>
    </html>
  );
}

Pro-tip: Diagnóstico rápido

Reproduce en modo incógnito (sin extensiones).
Desactiva Cloudflare/Vercel Edge temporalmente.
Busca en el código: new Date(), window., localStorage, Math.random().
Usa console.log('CLIENT') dentro de useEffect para confirmar qué se renderiza en cliente vs servidor.

🚨 Nunca uses suppressHydrationWarning como solución principal. Es un escape hatch, no un parche. Si el 90% de tu app usa suppressHydrationWarning, hay un problema arquitectónico.

¡Listo! Con esto el error desaparecerá de forma definitiva.

Cómo solucionar el error “Enable JavaScript and cookies to continue”

Erick Eduardo Ramos — Tue, 11 Aug 2026 09:54:14 +0000

Cómo solucionar el error “Enable JavaScript and cookies to continue”

Este mensaje aparece cuando Cloudflare (u otro proxy de seguridad similar) bloquea la solicitud porque detecta que el cliente no cumple con los requisitos mínimos de seguridad: JavaScript está deshabilitado o las cookies no están permitidas.

¿Por qué ocurre?

Cloudflare implementa mecanismos de protección contra bots y ataques automatizados. Cuando una solicitud llega sin:

Ejecutar JavaScript (necesario para resolver el JavaScript Challenge),
o sin aceptar cookies (para mantener el estado de la sesión tras la validación),

...Cloudflare interrumpe la conexión y muestra este mensaje.

Causas comunes:

Uso de curl, wget, o scripts sin motor JS (como Node.js puro sin Puppeteer/Playwright).
Configuración de navegador que bloquea JavaScript o cookies.
Requests desde herramientas de scraping o automatización sin emular un navegador real.
Errores en el flujo de validación de Cloudflare (raro, pero posible si hay redirecciones rotas).

Pasos para solucionarlo

✅ 1. Si eres un usuario final (navegando):

Habilita JavaScript en tu navegador:
- Chrome: Configuración > Privacidad y seguridad > Seguridad > Permitir JavaScript.
- Firefox: Preferencias > Privacidad y seguridad > Permisos > Habilitar JavaScript.
Habilita cookies de terceros (si el sitio usa dominios distintos para autenticación):
- Chrome: Configuración > Privacidad y seguridad > Cookies y otros datos de sitios > Permitir cookies de terceros.
Borra la caché y las cookies del dominio problemático.
Prueba en modo incógnito (para descartar extensiones bloqueantes).

✅ 2. Si eres desarrollador (haciendo requests programáticos)

🔧 Opción A: Usa un navegador headless (recomendado)

No intentes resolver el desafío manualmente. Usa herramientas que ejecuten JS y gestionen cookies:

# Ejemplo con Puppeteer (Node.js)
npx puppeteer-core --executable-path="/path/to/chrome" \
  --no-sandbox --disable-setuid-sandbox \
  --disable-dev-shm-usage \
  --viewport-width=1920 --viewport-height=1080 \
  --user-agent="Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/120.0.0.0 Safari/537.36" \
  --timeout=30000 \
  --wait-for-selector="body" \
  https://example.com

O en código (Node.js con puppeteer):

const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch({
    headless: 'new',
    args: ['--no-sandbox', '--disable-setuid-sandbox']
  });
  const page = await browser.newPage();

  // Simula un navegador real
  await page.setUserAgent('Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/120.0.0.0 Safari/537.36');

  await page.goto('https://example.com', { waitUntil: 'networkidle2' });

  // Espera a que se resuelva el desafío (Cloudflare lo hace automáticamente)
  await page.waitForSelector('body:not(:has(#challenge-error-text))', { timeout: 30000 });

  const content = await page.content();
  console.log(content);

  await browser.close();
})();

🔧 Opción B: Usa `cloudscraper` (solo para sitios con Cloudflare básico)

⚠️ Solo funciona si Cloudflare no usa Managed Challenge o Under Attack Mode. Ya está obsoleto, pero hay forks activos.

npm install cloudscraper

const cloudscraper = require('cloudscraper');

cloudscraper.get({
  url: 'https://example.com',
  jar: true, // Importante: gestiona cookies
  headers: {
    'User-Agent': 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36'
  }
}).then(body => {
  console.log(body);
}).catch(err => {
  console.error('Fallo:', err.message);
});

🔧 Opción C: Usa `playwright` (más robusto que Puppeteer hoy en día)

npm install playwright

const { chromium } = require('playwright');

(async () => {
  const browser = await chromium.launch({ headless: true });
  const context = await browser.newContext();
  const page = await context.newPage();

  await page.goto('https://example.com');
  await page.waitForLoadState('networkidle'); // Espera a que todo cargue, incluido JS

  // Si Cloudflare pide interacción manual (raro en headless), usa:
  // await page.click('#challenge-form button'); // si hay botón explícito

  const html = await page.content();
  console.log(html);

  await browser.close();
})();

Pro-tip: Verifica si Cloudflare está activo y qué modo usa

Abre https://www.cloudflare.com/ssl-website/ y entra tu dominio.
O usa dig para ver los registros DNS y confirmar si está detrás de Cloudflare:

   dig example.com +short
   # Si ves IPs como 104.16.x.x o 172.67.x.x → está en Cloudflare.

Revisa en el panel de Cloudflare:
- Security > Settings > Browser Integrity Check → debe estar On.
- Security > Bot Fight Mode o Under Attack Mode → si están activos, el desafío será más estricto.

💡 Clave: Si estás haciendo scraping, no evites el desafío. Usa una estrategia de resolución real (con JS). Cloudflare detecta requests sin JS y los bloquea intencionalmente.

✅ Solución definitiva: Usa un navegador headless real (Puppeteer/Playwright) con cookies habilitadas y espera a que se resuelva el desafío. No hay atajos seguros ni sostenibles.

Cómo solucionar el error \"Text content does not match server-rendered HTML\" en Next.js App Router

Erick Eduardo Ramos — Mon, 10 Aug 2026 10:11:12 +0000

Cómo solucionar el error "Text content does not match server-rendered HTML" en Next.js App Router

Este error ocurre cuando el HTML generado en el servidor (SSR/SSG) no coincide con el árbol de React generado durante la primera renderización en el cliente. React detecta la inconsistencia durante el proceso de hydration y lanza una advertencia crítica que puede romper la funcionalidad de tu app.

Causa raíz

La mayoría de los casos provienen de código no idempotente entre SSR y CSR, es decir, código que produce resultados diferentes dependiendo de si se ejecuta en el servidor o en el navegador. Las causas más frecuentes:

Uso de Date.now(), new Date(), Math.random() o APIs dependientes del tiempo en el renderizado.
Acceso directo a window, localStorage, navigator, etc. sin protección.
Lógica condicional basada en typeof window !== 'undefined' dentro del JSX.
Extensiones del navegador que inyectan elementos (ej. ad-blockers, traductores).
Metaetiqueta format-detection de iOS que modifica el DOM tras la carga inicial.

Solución definitiva (pasos verificados)

✅ Paso 1: Identifica el elemento problemático

Busca en el stack trace del error el componente y la línea exacta. Si no está claro:

Abre DevTools → pestaña Console.
Haz clic en el error → verás el mensaje detallado con la ruta del componente.
Busca en ese componente:
- Date, Math.random(), localStorage, window.innerWidth, etc.
- Uso de useEffect que modifique el estado antes de la primera renderización.
- Uso de typeof window !== 'undefined' en el cuerpo del componente (no dentro de useEffect).

✅ Paso 2: Aplica la solución según el caso

🔹 Caso A: Contenido dinámico (ej. fecha/hora, ID aleatorio)

❌ Incorrecto:

export default function Timestamp() {
  return <time>{new Date().toISOString()}</time>; // ❌ Diferente en SSR vs CSR
}

✅ Correcto (opción 1): Usa suppressHydrationWarning para contenido inmutable

export default function Timestamp() {
  return (
    <time datetime={new Date().toISOString()} suppressHydrationWarning>
      {new Date().toISOString()}
    </time>
  );
}

✅ Correcto (opción 2): Usa useEffect para retrasar la renderización

import { useState, useEffect } from 'react';

export default function Timestamp() {
  const [timestamp, setTimestamp] = useState('');

  useEffect(() => {
    setTimestamp(new Date().toISOString());
  }, []);

  return <time>{timestamp || '...'}</time>;
}

🔹 Caso B: Acceso a APIs del navegador (`localStorage`, `window`, etc.)

❌ Incorrecto:

export default function ThemeToggle() {
  const isDark = localStorage.theme === 'dark'; // ❌ Error en SSR
  return <button>{isDark ? '🌙' : '☀️'}</button>;
}

✅ Correcto: Usa useEffect + estado local

import { useState, useEffect } from 'react';

export default function ThemeToggle() {
  const [isDark, setIsDark] = useState(false);

  useEffect(() => {
    const stored = localStorage.getItem('theme');
    setIsDark(stored === 'dark');
  }, []);

  return <button>{isDark ? '🌙' : '☀️'}</button>;
}

🔹 Caso C: Lógica condicional basada en entorno

❌ Incorrecto:

export default function ResponsiveLayout() {
  const isMobile = typeof window !== 'undefined' && window.innerWidth < 768;
  return <div>{isMobile ? 'Mobile' : 'Desktop'}</div>;
}

✅ Correcto: Usa useEffect para detectar tamaño de pantalla

import { useState, useEffect } from 'react';

export default function ResponsiveLayout() {
  const [isMobile, setIsMobile] = useState(false);

  useEffect(() => {
    const checkMobile = () => setIsMobile(window.innerWidth < 768);
    checkMobile();
    window.addEventListener('resize', checkMobile);
    return () => window.removeEventListener('resize', checkMobile);
  }, []);

  return <div>{isMobile ? 'Mobile' : 'Desktop'}</div>;
}

🔹 Caso D: iOS inyecta enlaces automáticamente

✅ Solución definitiva: Agrega la metaetiqueta en app/layout.tsx

// app/layout.tsx
export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="es">
      <head>
        <meta
          name="format-detection"
          content="telephone=no, date=no, email=no, address=no"
        />
      </head>
      <body>{children}</body>
    </html>
  );
}

🛠️ Bloque de código corregido (ejemplo completo)

// app/page.tsx
import { useState, useEffect } from 'react';

export default function Page() {
  const [isClient, setIsClient] = useState(false);
  const [currentTime, setCurrentTime] = useState('');

  useEffect(() => {
    setIsClient(true);
    setCurrentTime(new Date().toLocaleTimeString());
  }, []);

  return (
    <div>
      <h1>App Router Features</h1>
      <p>Latest Version: 16.3.0</p>

      {/* Contenido seguro para SSR/CSR */}
      <time 
        datetime={new Date().toISOString()} 
        suppressHydrationWarning
      >
        {currentTime || 'Cargando...'}
      </time>

      {/* Componente con lógica client-only */}
      {isClient && <ClientOnlyComponent />}
    </div>
  );
}

// Componente client-only explícito
const ClientOnlyComponent = dynamic(() => import('./ClientOnly'), {
  ssr: false,
});

💡 Pro-tip: Prevención a largo plazo

Herramientas de detección temprana:

   # Instala ESLint plugin para Next.js
   npm install --save-dev eslint-plugin-next

Configura en .eslintrc.json:

   {
     "extends": ["next/core-web-vitals", "plugin:next/recommended"]
   }

Esto detecta usos inseguros de window, localStorage, etc.

Regla de oro para SSR:

Todo lo que se renderice en el JSX debe producir el mismo resultado en el servidor y en el cliente.
Para componentes 100% client-side:

   import dynamic from 'next/dynamic';
   const ClientComponent = dynamic(() => import('./ClientComponent'), { ssr: false });

Verifica en producción: Usa next build && next start para reproducir el entorno de producción (donde ocurren más errores de hydration).

✅ Resultado: El error desaparece, la app se hydrata correctamente y el usuario ve contenido consistente desde la primera interacción.

Cómo solucionar `docker run` con exit code 1 en Raspberry Pi

Erick Eduardo Ramos — Sun, 09 Aug 2026 09:32:11 +0000

Cómo solucionar `docker run` con exit code 1 en Raspberry Pi

¿Por qué ocurre?

El error Exited (1) indica que el proceso principal del contenedor terminó con un código de error no cero. En tu caso específico, el problema está en el comando docker run --net = host. El signo igual (=) entre --net y host no es válido en Docker CLI. Docker interpreta --net = como una opción desconocida, lo que provoca que el contenedor falle al iniciar.

Esto explica por qué funciona en la VM (posiblemente con una versión más permisiva o con un shell que hace algo distinto con los espacios), pero falla en el Raspberry Pi físico (donde el shell es más estricto y Docker rechaza la opción inválida).

Pasos para solucionarlo

Elimina el signo igual y los espacios innecesarios en la opción --net.
Verifica que el contenedor se ejecute en primer plano para diagnosticar errores adicionales.
Si persiste el problema, revisa los logs del contenedor.

Comando corregido

# ❌ INCORRECTO (con espacios y signo igual)
docker run --net = host -d -t myimage

# ✅ CORRECTO (sin espacios ni signo igual)
docker run --net host -d -t myimage

⚠️ Nota crítica: En versiones recientes de Docker, --net=host no es compatible con Raspberry Pi en modo no privado (es decir, si no estás ejecutando Docker como root o sin sudo). Si sigues teniendo problemas, ejecuta con sudo:

sudo docker run --net host -d -t myimage

Diagnóstico adicional (si el error persiste)

Si tras corregir el comando sigue fallando:

Ejecuta en primer plano para ver el error en tiempo real:

   docker run --net host -it --rm myimage

(Elimina -d y añade -it para modo interactivo y terminal)

Revisa los logs del contenedor si ya se creó:

   docker logs <nombre_o_id_del_contenedor>

Verifica compatibilidad de arquitectura:
- Si la imagen myimage fue construida para amd64 y ejecutas en Raspberry Pi (armhf o arm64), fallará silenciosamente.
- Usa docker inspect myimage --format '{{.Architecture}}' para verificar.
- Si es necesario, reconstruye la imagen para ARM:
```
 docker build --platform linux/arm/v7 -t myimage .
```

Pro-tip: Automatiza la validación del comando

Crea un script de verificación rápida:

#!/bin/bash
# validate-docker-run.sh
set -e

echo "Validando sintaxis del comando..."
if [[ "$*" =~ "--net\s*=" ]]; then
  echo "❌ ERROR: '--net' no debe tener espacios ni '='"
  echo "   Usa: --net host (sin espacios ni signo igual)"
  exit 1
fi

echo "✅ Sintaxis OK. Ejecutando..."
exec docker run "$@"

Guarda como validate-docker-run.sh, hazlo ejecutable (chmod +x validate-docker-run.sh) y úsalo así:

./validate-docker-run.sh --net host -d -t myimage

🔍 Dato clave: En Raspberry Pi, los errores de arquitectura y permisos son las segundas causas más comunes de Exited (1) tras errores de sintaxis en el comando. Si todo falla, ejecuta docker info y verifica que Server Version y Architecture coincidan con lo esperado para tu Raspberry Pi.

Cómo solucionar el error \"Enable JavaScript and cookies to continue\"

Erick Eduardo Ramos — Sat, 08 Aug 2026 09:30:56 +0000

Cómo solucionar el error "Enable JavaScript and cookies to continue"

Este mensaje no es un error de tu código, sino una protección activa de Cloudflare (o similar, como Incapsula/Imperva) que bloquea la solicitud porque detecta que el cliente no cumple con los requisitos mínimos de seguridad: JavaScript habilitado y cookies aceptadas.

🔍 Causa técnica

Cloudflare implementa un desafío de "JavaScript Challenge" para distinguir entre navegadores reales y bots/scraper automatizados. Cuando una solicitud HTTP no incluye:

Ejecución de JavaScript (para validar el desafío)
Almacenamiento y reenvío de cookies (cf_clearance)

...el servidor responde con esta página intermedia en lugar de servir el contenido real.

Esto ocurre comúnmente en:

Requests automatizados (Python requests, curl, etc.)
Configuraciones de proxies sin soporte JS
Navegadores headless mal configurados
Pruebas con herramientas como Selenium sin manejo de cookies

✅ Solución definitiva (3 enfoques)

🔧 Opción 1: Usa un navegador real (recomendado para scraping)

Con Selenium (Python):

from selenium import webdriver
from selenium.webdriver.chrome.options import Options

options = Options()
options.add_argument("--disable-blink-features=AutomationControlled")
options.add_experimental_option("excludeSwitches", ["enable-automation"])
options.add_experimental_option("useAutomationExtension", False)

driver = webdriver.Chrome(options=options)
driver.get("https://tu-sitio.com")

# Espera a que Cloudflare resuelva el desafío (hasta 10s)
import time
time.sleep(10)

# Ahora sí tienes acceso al contenido real
html = driver.page_source

⚠️ Clave: No uses driver.get() y luego time.sleep(0) — Cloudflare requiere tiempo para ejecutar su JS y establecer la cookie cf_clearance.

🧪 Opción 2: Simula el desafío manualmente (avanzado)

Si insistes en usar requests, debes:

Hacer una petición inicial para obtener el HTML del desafío
Extraer y ejecutar el script JS de validación (con execjs)
Generar la cookie cf_clearance válida
Reintentar la petición con cookies y headers correctos

Ejemplo simplificado con cloudscraper (Python):

pip install cloudscraper

import cloudscraper

scraper = cloudscraper.create_scraper(
    browser={
        'browser': 'firefox',
        'platform': 'windows',
        'mobile': False
    }
)
response = scraper.get("https://tu-sitio.com")
print(response.text)  # Ahora sí obtienes el contenido real

✅ cloudscraper maneja internamente el desafío JS y cookies.

🛠️ Opción 3: Configura Cloudflare (si eres el dueño del sitio)

Si tú controlas el servidor:

Accede al panel de Cloudflare → Security → WAF
Busca la regla "JavaScript Challenge"
Desactiva el desafío para tu IP o rango (solo para desarrollo)
O usa "Under Attack Mode" solo temporalmente

🚫 No recomendado en producción: debilita la protección DDoS.

💡 Pro-tip

Nunca confíes en time.sleep() fijo para esperar desafíos: usa WebDriverWait con condiciones explícitas.
Si usas headless, añade:

  options.add_argument("--disable-dev-shm-usage")
  options.add_argument("--no-sandbox")
  options.add_argument("--disable-gpu")

Cloudflare cambia sus desafíos frecuentemente: cloudscraper y Selenium son las soluciones más robustas a largo plazo.

✅ Verificación final: Si la respuesta HTTP es 200 OK pero el contenido contiene <span id="challenge-error-text">, aún no has superado el desafío. Revisa cookies y headers.

Cómo solucionar `docker run` con exit code 1 en Raspberry Pi

Erick Eduardo Ramos — Fri, 07 Aug 2026 09:54:22 +0000

Cómo solucionar `docker run` con exit code 1 en Raspberry Pi

¿Por qué ocurre este error?

El código de salida 1 indica que el proceso principal del contenedor terminó con un error genérico. En Raspberry Pi, los casos más comunes son:

Arquitectura incompatible: La imagen fue construida para amd64 (x86_64), pero Raspberry Pi usa armhf o arm64.
Falta de binarios nativos: El ENTRYPOINT/CMD del contenedor intenta ejecutar un binario compilado para otra arquitectura.
Problemas de permisos en dispositivos del sistema (especialmente en Raspberry Pi OS Lite o sin entorno gráfico).
Falta de memoria o recursos insuficientes (menos común, pero posible en dispositivos con poca RAM).

El hecho de que funcione en una VM pero no en hardware físico confirma fuertemente un problema de arquitectura.

Pasos para solucionarlo

1. Verifica la arquitectura del host y de la imagen

# En tu Raspberry Pi:
uname -m
# Salida esperada: armv7l (32-bit) o aarch64 (64-bit)

docker images myimage
# Busca la columna "ARCHITECTURE" (si está disponible)

docker inspect myimage | grep -i architecture
# Salida esperada: "Architecture": "arm" o "arm64"

2. Si la imagen no es compatible: reconstrúyela para ARM

Opción A: Usa `docker buildx` (recomendado)

# Habilita buildx
docker buildx create --use

# Construye para la arquitectura correcta
docker buildx build \
  --platform linux/arm/v7,linux/arm64 \
  --push \
  -t tu-usuario/myimage:latest \
  .

⚠️ Si tu imagen depende de binarios nativos (ej. .so, ejecutables precompilados), asegúrate de que estén disponibles para ARM.

Opción B: Usa una imagen base compatible

En tu Dockerfile, cambia la imagen base a una versión ARM:

# En lugar de:
FROM node:18-alpine

# Usa:
FROM arm32v7/node:18-alpine   # Para Raspberry Pi 3/4 32-bit
# O
FROM arm64v8/node:18-alpine   # Para Raspberry Pi 4/5 64-bit

3. Ejecuta en primer plano para diagnosticar

docker run --net=host -t myimage
# Quita la opción -d para ver logs en tiempo real

Si ves errores como Exec format error, es confirmación definitiva de incompatibilidad de arquitectura.

4. Verifica que el comando de inicio sea válido

Algunas imágenes usan ENTRYPOINT que requiere shell. Si el contenedor falla por no such file or directory, agrega --entrypoint=/bin/sh:

docker run --net=host -t --entrypoint=/bin/sh myimage -c "echo 'test' && ls -la /"

Bloque de código corregido (ejemplo funcional)

# Dockerfile corregido para Raspberry Pi
FROM arm32v7/python:3.9-slim

WORKDIR /app
COPY . .

# Asegura que el script sea ejecutable
RUN chmod +x /app/start.sh

# Usa shell para evitar problemas de PATH
ENTRYPOINT ["/bin/sh", "-c", "/app/start.sh"]

Y luego:

# Construcción para ARM
docker buildx build --platform linux/arm/v7 -t myimage:latest .

# Ejecución corregida (sin espacios en `--net=host`)
docker run --net=host -d -t myimage:latest

🔥 Nota crítica: En tu comando original hay un error tipográfico: --net = host (con espacios) es inválido. Debe ser --net=host (sin espacios alrededor del =).

Pro-tip: Diagnóstico rápido con `docker run --rm`

docker run --rm --net=host -t myimage 2>&1 | tee /tmp/container.log

Esto ejecuta el contenedor en primer plano, lo elimina automáticamente al terminar (--rm) y guarda los logs para análisis.

Si el problema persiste, revisa:

dmesg | grep -i segfault (para detectar fallos de segmentación por arquitectura)
file /usr/bin/python3 dentro del contenedor (si puedes acceder con --entrypoint=/bin/sh) para confirmar arquitectura del binario.

Cómo solucionar el error “Enable JavaScript and cookies to continue”

Erick Eduardo Ramos — Thu, 06 Aug 2026 11:14:28 +0000

Cómo solucionar el error “Enable JavaScript and cookies to continue”

Este error aparece cuando Cloudflare (u otro proxy inverso de seguridad) bloquea la solicitud del cliente porque detecta que JavaScript está deshabilitado o no se ha completado el desafío de verificación (como un browser integrity check). No es un error de tu código front-end, sino un mecanismo de seguridad activo.

🔍 Causa técnica

Cloudflare (o similar, como AWS WAF + Bot Management) inyecta un desafío JavaScript en la respuesta inicial. Si el navegador no ejecuta ese script (porque JS está deshabilitado, bloqueado por adblockers, o el entorno no es un navegador real), el servidor responde con este mensaje y niega el acceso.

Casos comunes donde ocurre:

Pruebas automatizadas con curl, requests de Python, o herramientas headless sin emular JS.
Navegadores con JavaScript deshabilitado o bloqueado.
Uso de extensiones que bloquean scripts (uBlock Origin, NoScript).
Configuración incorrecta de User-Agent o cabeceras HTTP que activan reglas de bloqueo.

✅ Solución definitiva (por escenario)

🧪 1. Si estás haciendo pruebas automatizadas (Python, Node.js, etc.)

No uses requests o curl directamente. Necesitas un motor de navegador real que ejecute JS.

✅ Opción recomendada: Playwright (soporta bypass de Cloudflare)

pip install playwright
playwright install chromium

# Ejemplo en Python con Playwright
from playwright.sync_api import sync_playwright

with sync_playwright() as p:
    browser = p.chromium.launch(headless=False)
    context = browser.new_context()
    page = context.new_page()
    page.goto("https://tu-sitio.com")
    # Espera a que se resuelva el desafío (Cloudflare lo maneja automáticamente si el navegador es real)
    page.wait_for_load_state("networkidle")
    print(page.title())  # Ya estás dentro
    browser.close()

⚠️ Importante: Usa headless=False en pruebas iniciales para verificar. En producción, puedes usar headless=True con args=["--disable-blink-features=AutomationControlled"].

❌ Evita: `requests` + `cloudscraper` (inestable y fácilmente detectado)

# NO RECOMENDADO: cloudscraper es frágil y se rompe con actualizaciones de Cloudflare
import cloudscraper
scraper = cloudscraper.create_scraper()
print(scraper.get("https://tu-sitio.com").text)  # Puede fallar en segundos

🌐 2. Si eres usuario final (no desarrollador)

Habilita JavaScript en tu navegador:
- Chrome: Configuración → Privacidad y seguridad → Configuración del sitio → JavaScript → Permitido.
- Firefox: Preferencias → Privacidad y seguridad → Permisos → Habilitar JavaScript.
Desactiva temporalmente bloqueadores de anuncios (uBlock, AdGuard).
Limpia cookies y caché → vuelve a cargar la página.
Usa un navegador actualizado (Chrome/Firefox/Edge última versión estable).

🛠️ 3. Si eres administrador del sitio (configuración Cloudflare)

Si el desafío es innecesario para tu tráfico legítimo:

Opción A: Ajustar nivel de protección de bots

En Cloudflare Dashboard → Security → Bot Management.
Cambia Bot Fight Mode a Off.
En Challenge Passage, añade reglas para excluir IPs o rutas confiables.

Opción B: Deshabilitar temporalmente el modo "Under Attack"

Dashboard → Security → WAF → Cambia el modo de Under Attack a Essential o Low.

⚠️ Nunca deshabilites completamente Cloudflare si tu sitio es público. Usa excepciones selectivas.

💡 Pro-tip: Detecta si Cloudflare está bloqueando tu petición

Agrega esta cabecera en tus peticiones para ver el ray ID:

curl -v https://tu-sitio.com 2>&1 | grep -i "cf-ray"

Si aparece cf-ray, Cloudflare está interviniendo. Si la respuesta es <div class="h2">...Enable JavaScript...</div>, el desafío no se completó.

✅ Resultado esperado: Al usar un navegador real (Playwright/Selenium con Chrome) o ajustar configuraciones de seguridad, el error desaparece y la página carga correctamente.

Cómo solucionar `docker run` con error `Exited (1)` en Raspberry Pi

Erick Eduardo Ramos — Wed, 05 Aug 2026 11:14:19 +0000

Cómo solucionar `docker run` con error `Exited (1)` en Raspberry Pi

¿Por qué ocurre este error?

El código de salida 1 indica que el proceso principal del contenedor terminó con un error genérico. En Raspberry Pi (especialmente modelos con arquitectura ARM), los problemas más comunes son:

Incompatibilidad de arquitectura: La imagen fue construida para amd64 (x86_64) pero se ejecuta en ARM (armv7l o aarch64).
Falta de binarios compatibles: El ENTRYPOINT o CMD del contenedor intenta ejecutar un binario incompatible con ARM.
Problemas de permisos o recursos: Falta de acceso a dispositivos (GPIO, etc.) o memoria insuficiente.
Espacio en disco insuficiente: Raspberry Pi suele tener particiones pequeñas para /var/lib/docker.

🔍 Nota crítica: En tu comando docker run --net = host, hay un espacio innecesario y problemático después del --net. Docker lo interpreta como un nombre de red literal = host, lo que causa fallos silenciosos o errores de red.

Pasos para solucionarlo (ordenados por probabilidad de éxito en Raspberry Pi)

1. Corrige el comando: elimina espacios en `--net = host`

# ❌ INCORRECTO (espacios alrededor del '=')
docker run --net = host -d -t myimage

# ✅ CORRECTO (sin espacios)
docker run --net host -d -t myimage

2. Verifica la arquitectura de la imagen y del host

# En tu Raspberry Pi:
uname -m  # Debería mostrar: armv7l (RPi 3/4) o aarch64 (RPi 4/5)

# Verifica la arquitectura de tu imagen:
docker inspect myimage | grep -i arch
# O directamente:
docker images --format "{{.Architecture}}" myimage

Si la imagen es amd64 y tu Pi es ARM, necesitas reconstruir la imagen para ARM.

3. Ejecuta en primer plano para ver el error real

docker run --net host -it --rm myimage
# O sin -d (background) ni -t (TTY):
docker run --net host myimage

Esto mostrará el error específico (ej: standard_init_linux.go:211: exec user process caused: no such file or directory → indica binario incompatible).

4. Solución definitiva: reconstruir imagen para ARM

Si usas Dockerfile, añade:

# Al inicio del Dockerfile
FROM --platform=linux/arm/v7 arm32v7/debian:bullseye-slim  # o la base que uses
# O para RPi 4/5 de 64 bits:
# FROM --platform=linux/arm64 arm64v8/debian:bullseye-slim

Y reconstruye:

docker build -t myimage .

5. Verifica espacio en disco y permisos

# Espacio en disco:
df -h /var/lib/docker

# Si es crítico (< 500 MB), limpia:
docker system prune -a --volumes

# Si el contenedor necesita acceso a hardware (GPIO, etc.):
docker run --net host --privileged -d -t myimage

Bloque de código corregido (ejemplo funcional en RPi)

# 1. Verifica arquitectura
uname -m

# 2. Corrige el comando (¡sin espacios en --net!)
docker run --net host -d -t myimage

# 3. Si persiste el error, ejecuta en foreground para debug:
docker run --net host -it --rm myimage

# 4. Si necesitas acceso a dispositivos (opcional):
docker run --net host --device /dev/gpiomem -d -t myimage

Pro-tip: Usa `docker run --platform` para forzar compatibilidad (si la imagen lo soporta)

# Si tu imagen es multi-plataforma (multi-arch):
docker run --platform=linux/arm/v7 --net host -d -t myimage

⚠️ Importante: Solo funciona si el repositorio de la imagen tiene manifests multi-arch (ej: python:3.9, nginx, etc.). Si no, tendrás que reconstruir.

Resumen rápido:

Elimina espacios en --net host
Verifica arquitectura (uname -m vs docker inspect)
Ejecuta sin -d para ver el error
Reconstruye la imagen para ARM si es necesario

Con esto, el contenedor dejará de salir con Exited (1) en tu Raspberry Pi.

Cómo solucionar `docker run` con exit code 1 en Raspberry Pi

Erick Eduardo Ramos — Tue, 04 Aug 2026 11:17:55 +0000

Cómo solucionar `docker run` con exit code 1 en Raspberry Pi

¿Por qué ocurre?

El error Exited (1) indica que el proceso principal del contenedor terminó con un código de error. En Raspberry Pi, los casos más comunes son:

Arquitectura incompatible: La imagen fue construida para amd64 (x86_64) pero Raspberry Pi usa armhf o arm64.
Falta de binarios compatibles: El ENTRYPOINT/CMD del contenedor ejecuta un binario compilado para otra arquitectura.
Problemas de permisos o recursos: Especialmente en Raspberry Pi con sistemas minimalistas (Raspbian/Debian).
Sintaxis inválida en el comando: El espacio en --net = host es un error grave.

Pasos para solucionarlo

1. Corrige la sintaxis del comando

El comando original tiene un error crítico: --net = host debe escribirse sin espacios alrededor del =.

# INCORRECTO (genera error de parsing)
docker run --net = host -d -t myimage

# CORRECTO
docker run --net host -d -t myimage

2. Ejecuta en primer plano para ver el error real

Elimina -d (modo detached) y añade -it para ver el output:

docker run --net host -it myimage

3. Verifica la arquitectura del contenedor

Ejecuta estos comandos en tu Raspberry Pi:

# Verifica la arquitectura del host
uname -m

# Verifica la arquitectura de la imagen
docker inspect myimage | grep -i architecture

Si la imagen es amd64 y tu Pi es armv7l o aarch64, no funcionará.

4. Usa imágenes multiarquitectura o reconstruye

Si la imagen no es compatible:

# Opción A: Busca una versión ARM de la imagen
docker pull arm32v7/nginx     # Ejemplo para ARMv7
docker pull arm64v8/nginx     # Ejemplo para ARM64

# Opción B: Reconstruye la imagen en el Pi
docker build -t myimage .

5. Verifica dependencias críticas

En Raspberry Pi, asegúrate de tener instalados:

sudo apt update && sudo apt install -y libseccomp2 libsystemd0

Bloque de código corregido

# Comando corregido + diagnóstico
docker run --net host -it --rm myimage

# Si falla por arquitectura, usa QEMU para emulación (lento)
docker run --platform linux/arm/v7 --net host -it --rm myimage

⚠️ Nota crítica: Si usas --platform linux/arm/v7, necesitas habilitar QEMU en Docker:
docker run --rm --privileged multiarch/qemu-user-static --reset -p yes

Pro-tip: Diagnóstico rápido en Raspberry Pi

Crea este script de diagnóstico:

#!/bin/bash
echo "=== ARQUITECTURA DEL HOST ==="
uname -m
echo -e "\n=== ARQUITECTURA DE LA IMAGEN ==="
docker inspect myimage --format '{{.Architecture}}'
echo -e "\n=== LOGS DEL CONTENEDOR ==="
docker run --net host -d myimage
sleep 2
docker logs $(docker ps -lq)

Este script te dará la causa raíz en menos de 30 segundos.

Cómo solucionar el error “Enable JavaScript and cookies to continue”

Erick Eduardo Ramos — Mon, 03 Aug 2026 12:15:20 +0000

Cómo solucionar el error “Enable JavaScript and cookies to continue”

Este error aparece cuando Cloudflare (u otro proxy inverso de seguridad) detecta que el navegador del usuario no cumple con los requisitos mínimos para acceder al sitio: JavaScript está deshabilitado o las cookies no están permitidas. Pero en entornos reales, el problema suele ser más sutil: el navegador sí tiene JS y cookies habilitados, pero la configuración del entorno de ejecución (como un headless browser, test automation, o un scraper) no emula correctamente el comportamiento del cliente.

🔍 Causa raíz técnica

Cloudflare emite un desafío (CAPTCHA o JS challenge) para verificar que el cliente es un navegador real. Si la respuesta no cumple con el desafío (por ejemplo, porque:

El navegador no ejecuta el JS del desafío (headless sin soporte),
Las cookies no se persisten entre solicitudes,
El User-Agent o Accept-Language no coinciden con navegadores reales,
Falta el Referer o Origin en headers,
Se bloquean cookies de terceros (como las de Cloudflare),

… entonces el servidor devuelve este mensaje estático en lugar de redirigir a la página solicitada.

⚠️ Nota crítica: Si estás usando herramientas como curl, requests de Python, o navegadores headless sin configuración especial, no pasarás el desafío de Cloudflare. Es intencional: Cloudflare bloquea tráfico no humano por diseño.

✅ Solución definitiva (por escenario)

🛠️ Caso 1: Navegador real (usuario final)

Verifica que JavaScript esté habilitado:
- Chrome: Configuración → Privacidad y seguridad → Configuración de sitios → JavaScript → Permitido.
- Firefox: Preferencias → Privacidad y seguridad → Cookies y datos de sitios → Deshabilitar “Bloquear cookies y datos de sitios”.
Limpia cookies y caché (especialmente para *.cloudflare.com).
Reinicia el navegador y vuelve a cargar la página.

🛠️ Caso 2: Automatización / Scraping (Python + Playwright/Selenium)

No uses requests o urllib: no ejecutan JS. Usa un navegador real con soporte para Cloudflare.

✅ Ejemplo con Playwright (recomendado):

from playwright.sync_api import sync_playwright

with sync_playwright() as p:
    browser = p.chromium.launch(headless=False)  # headless=True también funciona si se configura bien
    context = browser.new_context(
        viewport={"width": 1920, "height": 1080},
        user_agent="Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/120.0.0.0 Safari/537.36"
    )
    page = context.new_page()

    # Opcional: simular interacción humana para evitar bloqueos
    page.goto("https://tu-sitio.com", wait_until="networkidle")

    # Espera explícita al desafío Cloudflare y su resolución automática
    try:
        page.wait_for_selector("#challenge-error-text", timeout=5000)
        raise RuntimeError("Cloudflare bloqueó la solicitud. Asegúrate de usar un navegador real.")
    except:
        pass  # No hay desafío → todo bien

    # Procede con la navegación
    content = page.content()

🔑 Claves:

Usa wait_until="networkidle" para esperar a que termine todo el JS.
Nunca uses headless="new" sin configuración extra: Cloudflare detecta headless moderno fácilmente.
Si usas headless=True, añade:

  context = browser.new_context(
      # ... otros parámetros ...
      bypass_csp=True,  # Evita bloqueos de Content Security Policy
      java_script_enabled=True,
      cookies=[{"name": "cf_clearance", "value": "...", "domain": ".tu-sitio.com"}]  # Si ya tienes un clearance válido
  )

🛠️ Caso 3: App móvil / WebView (Android/iOS)

En Android: Asegúrate de que WebView.getSettings().setJavaScriptEnabled(true) y setAcceptCookies(true) estén activos.
En iOS: Verifica que WKWebView tenga dataStore = WKWebsiteDataStore.default() (para persistir cookies).

🧪 Verificación rápida (CLI)

Si quieres probar si el sitio responde sin desafío:

curl -H "User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36" \
     -H "Accept: text/html,application/xhtml+xml" \
     -H "Accept-Language: es-ES,es;q=0.9" \
     -H "Referer: https://www.google.com/" \
     -c /tmp/cookies.txt \
     -L https://tu-sitio.com

Si el HTML contiene #challenge-error-text, el servidor sigue bloqueando. Necesitas emular un navegador real.

💡 Pro-tip: Evita el desafío desde el origen

Si tú controlas el backend:

Agrega tu IP o rango a la lista blanca de Cloudflare (Panel → Firewall → Tools → Add IP Address).
Usa Cloudflare Access con autenticación por token si es una API interna.
Para APIs públicas: desactiva el "Under Attack Mode" y ajusta las reglas de WAF para excluir endpoints de API.

⚠️ Nunca intentes "bypassear" Cloudflare sin autorización. Es una violación de sus Términos y puede generar bloqueos permanentes.

✅ Solución definitiva resumida: Usa un navegador real (Playwright/Selenium) con cookies habilitadas, User-Agent realista y espera a que termine el JS. Si eres el propietario del sitio, configura Cloudflare para excluir tráfico legítimo.

Cómo solucionar \"Text content does not match server-rendered HTML\" en Next.js App Router

Erick Eduardo Ramos — Sun, 02 Aug 2026 10:28:25 +0000

Cómo solucionar "Text content does not match server-rendered HTML" en Next.js App Router

Este error ocurre cuando el HTML generado en el servidor (SSR/SSG) no coincide con lo que React intenta hidratar en el navegador. Es un problema de coherencia entre el DOM estático y el árbol virtual inicial, no un error de lógica funcional.

Causa raíz técnica

La mayoría de los casos provienen de código no determinista en tiempo de renderizado, como:

Uso directo de window, localStorage, Date.now() o new Date() en el render
Lógica condicional basada en typeof window !== 'undefined' dentro del render
APIs del navegador que no existen en Node.js
Extensiones del navegador (especialmente en desarrollo) que inyectan elementos
Metaetiquetas de iOS que transforman automáticamente contenido (ej. números telefónicos → enlaces)

Solución definitiva (pasos verificados)

✅ Paso 1: Identifica el elemento problemático

Busca en el stack trace o en la consola del navegador el mensaje exacto:

Warning: Text content "..." does not match server-rendered "..."

Localiza el componente y el elemento HTML afectado.

✅ Paso 2: Aplica la solución según el caso

Caso A: Contenido dinámico (fechas, IDs aleatorios, etc.)

Usa suppressHydrationWarning en el elemento específico:

// ❌ Mal: fecha generada en render
<span>{new Date().toLocaleDateString()}</span>

// ✅ Bien: con supresión explícita
<time suppressHydrationWarning>{new Date().toLocaleDateString()}</time>

Caso B: Uso de APIs del navegador (localStorage, window.innerWidth, etc.)

Mueve la lógica a useEffect o usa dynamic({ ssr: false }):

// ❌ Mal: acceso directo a window
const [width, setWidth] = useState(window.innerWidth);

// ✅ Bien: con useEffect + estado inicial seguro
import { useState, useEffect } from 'react';

export default function Responsive() {
  const [width, setWidth] = useState(0); // Inicializa con valor neutral

  useEffect(() => {
    setWidth(window.innerWidth);
    const handleResize = () => setWidth(window.innerWidth);
    window.addEventListener('resize', handleResize);
    return () => window.removeEventListener('resize', handleResize);
  }, []);

  return <div>Width: {width}</div>;
}

Caso C: Componente 100% client-side (ej. gráficos, canvas, mapas)

Desactiva SSR con next/dynamic:

// components/MapChart.tsx
export default function MapChart() {
  // Código que usa window, document, etc.
  return <div ref={mapRef} />;
}

// page.tsx
import dynamic from 'next/dynamic';

const MapChart = dynamic(() => import('../components/MapChart'), { 
  ssr: false,
  loading: () => <p>Cargando mapa...</p>
});

export default function Page() {
  return <MapChart />;
}

✅ Paso 3: Verifica configuraciones externas

Desactiva extensiones del navegador (especialmente ad-blockers, traductores, lectores de pantalla)
Revisa configuraciones de CDN/Edge (Cloudflare Auto Minify, Fastly Edge Side Includes)
Agrega metaetiqueta para iOS si usas fechas/teléfonos:

<!-- en app/layout.tsx -->
<head>
  <meta name="format-detection" content="telephone=no, date=no, email=no" />
</head>

Pro-tip: Diagnóstico rápido con `console.log` en SSR

Agrega esto temporalmente en el componente sospechoso:

if (typeof window === 'undefined') {
  console.log('SERVER RENDER:', props);
} else {
  console.log('CLIENT RENDER:', props);
}

Si los logs difieren en estructura o contenido, ahí está el problema.

⚠️ Nunca uses suppressHydrationWarning en elementos contenedores (como <div>, <p>, <span> genéricos). Solo en elementos específicos con contenido no determinista (ej. <time>, <span> con timestamp).

Cómo solucionar el error \"Enable JavaScript and cookies to continue\"

Erick Eduardo Ramos — Sat, 01 Aug 2026 10:29:05 +0000

Cómo solucionar el error "Enable JavaScript and cookies to continue"

¿Por qué ocurre este error?

Este mensaje aparece cuando Cloudflare (o un proxy similar como AWS WAF, Akamai, etc.) detecta que el navegador del cliente no cumple con los requisitos mínimos de seguridad para acceder al sitio protegido. Específicamente:

JavaScript está deshabilitado o bloqueado (por extensiones, configuraciones de seguridad o navegadores antiguos).
Las cookies no están habilitadas o no se están aceptando correctamente.
El navegador no pasa el JavaScript Challenge de Cloudflare (un mecanismo anti-bot que verifica que el cliente es un navegador real).

⚠️ Importante: Este error no es un bug en tu código front-end. Es una defensa del servidor/proxy contra tráfico no confiable. Pero si tú eres el desarrollador y ves este mensaje mientras desarrollas localmente, entonces sí es un problema de configuración.

Pasos para resolverlo

✅ Caso 1: Estás probando localmente (localhost)

1. Verifica que no estés usando `file://`

Cloudflare y otros WAF no funcionan con archivos locales (file://). Debes servir tu sitio mediante un servidor HTTP local (ej. http://localhost:3000).

2. Usa un servidor local con HTTPS (recomendado)

Cloudflare requiere HTTPS para muchos desafíos. Configura tu entorno local con HTTPS:

En Next.js: next dev --https
En Vite: Usa vite --https
En Node puro: Usa mkcert + http-server con certificados locales firmados.

3. Desactiva temporalmente Cloudflare (si estás usando su proxy)

Si usas Cloudflare en desarrollo:

Ve a la pestaña DNS en tu panel de Cloudflare.
Asegúrate de que el registro de tu dominio tenga el ícono nube gris (DNS only), NO naranja (proxied).
O usa un dominio sin proxy para desarrollo (ej. dev.tudominio.com sin proxy).

4. Verifica que tu navegador no bloquee cookies o JS

Desactiva extensiones como uBlock Origin, Privacy Badger, Ghostery.
Asegúrate de que javascript.enabled = true y network.cookie.cookieBehavior = 0 (en about:config de Firefox o Chrome).

✅ Caso 2: El error ocurre en producción (usuarios reales)

1. Verifica que el dominio esté correctamente configurado en Cloudflare

Asegúrate de que el registro DNS apunte a Cloudflare y que el proxy esté activo (nube naranja).
Confirma que el certificado SSL esté activo (Flexible/Full/Full (Strict)).

2. Ajusta el nivel de protección de Cloudflare

Ve a Security → WAF → Tools y revisa:

Browser Integrity Check: Si está en High, baja a Medium o Low.
Challenge Passage: Verifica que no estés bloqueando por User-Agent o IP.

3. Asegura que tu app envíe cookies correctamente

Si usas autenticación:

Las cookies deben tener SameSite=None y Secure si se usan en subdominios o con HTTPS.
Ejemplo en Node.js/Express:

  res.cookie('token', 'abc123', {
    httpOnly: true,
    secure: true,      // obligatorio para SameSite=None
    sameSite: 'None',
    domain: '.tudominio.com'
  });

4. Verifica que no haya CORS mal configurado

Si el frontend y backend están en dominios distintos:

El backend debe enviar Access-Control-Allow-Credentials: true.
El frontend debe usar credentials: 'include' en fetch:

  fetch('/api/login', {
    method: 'POST',
    credentials: 'include',
    body: JSON.stringify({ user, pass }),
    headers: { 'Content-Type': 'application/json' }
  });

Bloque de código corregido (ejemplo mínimo funcional)

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <title>App segura</title>
  <script>
    // Asegura que JS esté habilitado (opcional, para UX)
    document.addEventListener('DOMContentLoaded', () => {
      console.log('JavaScript está activo ✅');
    });
  </script>
</head>
<body>
  <div id="app">Cargando...</div>
  <script>
    // Verificación básica de cookies (para depuración)
    if (!document.cookie.includes('session=')) {
      console.warn('⚠️ Cookies no detectadas. Verifica configuración.');
    }
  </script>
</body>
</html>

Pro-tip: Diagnóstico rápido con `curl`

Ejecuta esto en tu terminal para simular una petición limpia:

curl -v https://tudominio.com 2>&1 | grep -i "challenge\|set-cookie\|javascript"

Si ves < set-cookie: cf_clearance=..., Cloudflare está emitiendo el challenge.
Si no hay set-cookie, el problema está en la configuración del proxy o certificado.

✅ Solución definitiva: Usa HTTPS en desarrollo, desactiva Cloudflare para entornos locales, y asegura que las cookies se manejen con SameSite=None; Secure en producción.

DEV Community: Erick Eduardo Ramos

Cómo solucionar el error “Text content does not match server-rendered HTML” en Next.js App Router

Cómo solucionar el error “Text content does not match server-rendered HTML” en Next.js App Router

Causa raíz

Solución definitiva (pasos verificados)

✅ Paso 1: Busca y elimina dependencias de tiempo o contexto del renderizado

✅ Paso 2: Deshabilita detección automática de iOS (¡frecuente causa silenciosa!)

✅ Paso 3: Evita APIs del navegador en render

✅ Paso 4: Verifica configuración de CDN

Bloque de código corregido (ejemplo completo)

Pro-tip: Diagnóstico rápido

Cómo solucionar el error “Enable JavaScript and cookies to continue”

Cómo solucionar el error “Enable JavaScript and cookies to continue”

¿Por qué ocurre?

Pasos para solucionarlo

✅ 1. Si eres un usuario final (navegando):

✅ 2. Si eres desarrollador (haciendo requests programáticos)

🔧 Opción A: Usa un navegador headless (recomendado)

🔧 Opción B: Usa cloudscraper (solo para sitios con Cloudflare básico)

🔧 Opción C: Usa playwright (más robusto que Puppeteer hoy en día)

Pro-tip: Verifica si Cloudflare está activo y qué modo usa

Cómo solucionar el error \"Text content does not match server-rendered HTML\" en Next.js App Router

Cómo solucionar el error "Text content does not match server-rendered HTML" en Next.js App Router

Causa raíz

Solución definitiva (pasos verificados)

✅ Paso 1: Identifica el elemento problemático

✅ Paso 2: Aplica la solución según el caso

🔹 Caso A: Contenido dinámico (ej. fecha/hora, ID aleatorio)

🔹 Caso B: Acceso a APIs del navegador (localStorage, window, etc.)

🔹 Caso C: Lógica condicional basada en entorno

🔹 Caso D: iOS inyecta enlaces automáticamente

🛠️ Bloque de código corregido (ejemplo completo)

💡 Pro-tip: Prevención a largo plazo

Cómo solucionar `docker run` con exit code 1 en Raspberry Pi

Cómo solucionar docker run con exit code 1 en Raspberry Pi

¿Por qué ocurre?

Pasos para solucionarlo

Comando corregido

Diagnóstico adicional (si el error persiste)

Pro-tip: Automatiza la validación del comando

Cómo solucionar el error \"Enable JavaScript and cookies to continue\"

Cómo solucionar el error "Enable JavaScript and cookies to continue"

🔍 Causa técnica

✅ Solución definitiva (3 enfoques)

🔧 Opción 1: Usa un navegador real (recomendado para scraping)

🧪 Opción 2: Simula el desafío manualmente (avanzado)

🛠️ Opción 3: Configura Cloudflare (si eres el dueño del sitio)

💡 Pro-tip

Cómo solucionar `docker run` con exit code 1 en Raspberry Pi

Cómo solucionar docker run con exit code 1 en Raspberry Pi

¿Por qué ocurre este error?

Pasos para solucionarlo

1. Verifica la arquitectura del host y de la imagen

2. Si la imagen no es compatible: reconstrúyela para ARM

Opción A: Usa docker buildx (recomendado)

Opción B: Usa una imagen base compatible

3. Ejecuta en primer plano para diagnosticar

4. Verifica que el comando de inicio sea válido

Bloque de código corregido (ejemplo funcional)

Pro-tip: Diagnóstico rápido con docker run --rm

Cómo solucionar el error “Enable JavaScript and cookies to continue”

Cómo solucionar el error “Enable JavaScript and cookies to continue”

🔍 Causa técnica

✅ Solución definitiva (por escenario)

🧪 1. Si estás haciendo pruebas automatizadas (Python, Node.js, etc.)

✅ Opción recomendada: Playwright (soporta bypass de Cloudflare)

❌ Evita: requests + cloudscraper (inestable y fácilmente detectado)

🌐 2. Si eres usuario final (no desarrollador)

🛠️ 3. Si eres administrador del sitio (configuración Cloudflare)

Opción A: Ajustar nivel de protección de bots

Opción B: Deshabilitar temporalmente el modo "Under Attack"

💡 Pro-tip: Detecta si Cloudflare está bloqueando tu petición

Cómo solucionar `docker run` con error `Exited (1)` en Raspberry Pi

Cómo solucionar docker run con error Exited (1) en Raspberry Pi

¿Por qué ocurre este error?

Pasos para solucionarlo (ordenados por probabilidad de éxito en Raspberry Pi)

1. Corrige el comando: elimina espacios en --net = host

2. Verifica la arquitectura de la imagen y del host

3. Ejecuta en primer plano para ver el error real

4. Solución definitiva: reconstruir imagen para ARM

🔧 Opción B: Usa `cloudscraper` (solo para sitios con Cloudflare básico)

🔧 Opción C: Usa `playwright` (más robusto que Puppeteer hoy en día)

🔹 Caso B: Acceso a APIs del navegador (`localStorage`, `window`, etc.)

Cómo solucionar `docker run` con exit code 1 en Raspberry Pi

Cómo solucionar `docker run` con exit code 1 en Raspberry Pi

Opción A: Usa `docker buildx` (recomendado)

Pro-tip: Diagnóstico rápido con `docker run --rm`

❌ Evita: `requests` + `cloudscraper` (inestable y fácilmente detectado)

Cómo solucionar `docker run` con error `Exited (1)` en Raspberry Pi

1. Corrige el comando: elimina espacios en `--net = host`

Pro-tip: Usa `docker run --platform` para forzar compatibilidad (si la imagen lo soporta)

Cómo solucionar `docker run` con exit code 1 en Raspberry Pi

Pro-tip: Diagnóstico rápido con `console.log` en SSR

1. Verifica que no estés usando `file://`

Pro-tip: Diagnóstico rápido con `curl`