---
title: "React: solución de problemas"
slug: "react-troubleshooting"
category: "Faq"
hosts: "react"
locale: "es"
reactExample: "pattern-ssr.tsx"
---

# React: solución de problemas

## El widget se queda vacío

Comprueba primero que usas el nombre de componente exportado y que todas las opciones están en `data`. El [resumen de componentes](/docs/react/intro/react-components) muestra los exports disponibles.

Una altura de `100%` solo funciona en un contenedor padre con altura calculable. Para acotar el problema empieza con `height: "320px"`. En Table cada columna necesita un ancho, al menos una `fraction`.

## Un clic no dispara el callback

Activa la posibilidad de clic en el sitio correcto: por ejemplo en la fila de la tabla, una tarjeta Kanban o un step. Revisa la firma del callback en la referencia del widget. Un ID no es una posición de callback; algunos eventos entregan índices, otros valores.

## Tras guardar, la vista salta atrás

Lleva el resultado confirmado al estado de React y deriva de él un nuevo objeto `data`. El widget no guarda solo en tu base de datos. En Kanban, `onItemDrop` debe devolver la promesa de guardado.

## TypeScript no reconoce un callback o un slot JSX

Estas referencias pertenecen a `0.1.0-alpha.5`. Compara tu versión instalada y evita copias mezcladas del paquete. Los tipos están en el paquete; no necesitas un paquete extra de tipos de widgets.

## Renderizado en servidor

El runtime del widget usa APIs del navegador. En una aplicación con server rendering, impórtalo solo en el navegador. Una marca de solo cliente no basta en todos los frameworks si los módulos ya se evalúan en el servidor. Este ejemplo completo mueve el import de runtime a un efecto; el import de tipos se elimina en el build:

```tsx
import { useEffect, useState } from 'react';
import type { ComponentType } from 'react';
import type { ArcWidgetButtonProps } from '@arcrider/arcwidgets-react';
export default function Example() {
  const [Button, setButton] =
    useState<ComponentType<ArcWidgetButtonProps> | null>(null);
  const [error, setError] = useState(false);
  useEffect(() => {
    let active = true;
    import('@arcrider/arcwidgets-react')
      .then((module) => {
        if (active) setButton(() => module.ArcWidgetButton);
      })
      .catch(() => {
        if (active) setError(true);
      });
    return () => {
      active = false;
    };
  }, []);
  if (error) return <p role="alert">Widget konnte nicht geladen werden.</p>;
  return Button ? (
    <Button
      data={{
        title: 'Bereit',
      }}
    />
  ) : (
    <p>Widget lädt …</p>
  );
}
```

Como alternativa usa el mecanismo de tu framework que desactiva explícitamente el server rendering para este componente. Un placeholder estable evita saltos de layout.

## React Strict Mode

El desarrollo puede montar y desmontar componentes varias veces. Dispara los guardados desde callbacks de interacción, no al renderizar. Asigna IDs propios estables solo donde los necesites; el mismo ID no puede aparecer a la vez más de una vez en el documento.

## Un aviso de licencia sigue visible

Registrar el dominio en el portal no basta. Copia el fragmento de licencia del proyecto en la app. Consulta [paquete y licencias](/docs/react/faq/react-paket-und-lizenzierung).