
# Error: listen EADDRINUSE: address already in use 0.0.0.0:XXXX

<Date date="01-02-2023" />

<GoogleAdsense />

Si intenta iniciar un servidor en un puerto que ya está siendo utilizado por otro programa, obtendrá el siguiente error:

<CH.Code style={{maxWidth: 'max-content', margin: '20px 0'}}>

```bash
MAKINOTE$ yarn start
yarn run v1.22.19
$ next start
Error: listen EADDRINUSE: address already in use 0.0.0.0:3000
    at Server.setupListenHandle [as _listen2] (node:net:1432:16)
    at listenInCluster (node:net:1480:12)
    at doListen (node:net:1629:7)
    at processTicksAndRejections (node:internal/process/task_queues:84:21) {
  code: 'EADDRINUSE',
  errno: -48,
  syscall: 'listen',
  address: '0.0.0.0',
  port: 3000
}
```

</CH.Code>

## Encuentra el proceso que está usando el puerto

<CH.Code style={{maxWidth: 'max-content', margin: '20px 0'}}>

```bash
MAKINOTE$ lsof -i :3000
COMMAND   PID                 USER   FD   TYPE             DEVICE SIZE/OFF NODE NAME
node    38091 xabier.lameirocardam   24u  IPv6 0xee02297dd086ebc1      0t0  TCP *:hbci (LISTEN)
```

</CH.Code>

## Mata el proceso

<CH.Code style={{maxWidth: 'max-content', margin: '20px 0'}}>

```bash
MAKINOTE$ kill -9 38091
```

</CH.Code>



# Posible solución para NPM - Failed to replace env in config: $\{NPM_TOKEN}

<Date date="01-03-2023" />

<GoogleAdsense />

En este breve post voy a enseñar una solución para el error `Failed to replace env in config: ${NPM_TOKEN}` que se produce cuando se intenta ejecutar un comando de yarn o npm.

Puede ser que en algún momento te hayas encontrado con este error al intentar ejecutar un comando de yarn o npm. En mi caso fue
por que publique una de mis librerias en github y para poder instalarla desde github, necesitaba un token.
Este token se genera en github y se guarda en las variables de entorno del sistema.

Pero es necesario crear un archivo .npmrc en la raiz del proyecto y añadir el siguiente contenido:

<CH.Code style={{maxWidth: 'max-content', margin: '20px 0'}}>

```bash .npmrc
@xabierlameiro:registry=https://npm.pkg.github.com/
//npm.pkg.github.com/:_authToken=${NPM_TOKEN}
```

</CH.Code>

Lo que puede ocurrir es que dejes est archivo fuera de la carpeta del proyeccto y lo guardes en la carpeta de usuario,
por ejemplo en mi caso lo guardé en la carpeta `C:\Users\xabierlameiro\.npmrc` y por eso me daba el error.

Para solucionarlo, lo que hice fue:

<CH.Code style={{maxWidth: 'max-content', height:'max-content', margin: '20px 0'}}>

```bash
yarn install --verbose
```

</CH.Code>

Me enseñó las rutas donde estaba buscando el archivo .npmrc y me di cuenta que lo estaba usando desde en la carpeta de usuario.

Lo **_eliminé_** de la carpeta de usuario y lo volví a crear en la raiz del proyecto y ya no me daba el error.

> Espero que si os pasa lo mismo, os sirva de ayuda.



# Error no detectado: error de reacción minimizado

<Date date="01-05-2023" />

<GoogleAdsense />

Al usar React, puede encontrar el siguiente error: `Uncaught Error: Minified React error visit https://reactjs.org/docs/error-decoder.html?invariant=425 for the full message or use the non-minified dev environment for full errors and additional helpful warnings.`
Este error es causado por el uso de fechas en la aplicación. El error aparece cuando la fecha y la hora del navegador no tienen el mismo formato que la fecha y la hora del servidor.

¿Cómo resolví el problema?

## Código con el error

<CH.Code style={{maxWidth: 'max-content', margin: '20px 0'}}>

```tsx DateAndHour.tsx mark=18,19,20,21
const DateAndHour = () => {
    const { locale } = useRouter();
    const [date, setDate] = React.useState(new Date());
    const day = date.toLocaleDateString(locale, { weekday: 'short' });
    const dayNumber = date.toLocaleDateString(locale, { day: 'numeric' });
    const month = date.toLocaleDateString(locale, { month: 'short' });
    const hour = date.toLocaleTimeString(locale, { hour: 'numeric', minute: 'numeric' });

    React.useEffect(() => {
        const interval = setInterval(() => {
            setDate(new Date());
        }, 60000);
        return () => clearInterval(interval);
    }, []);

    return (
        <div className={styles.dateAndHour}>
            <span>{day}</span>
            <span>{dayNumber}</span>
            <span>{month}</span>
            <span>{hour}</span>
        </div>
    );
};
```

</CH.Code>

## Código sin el error

Utilice el atributo `suppressHydrationWarning` para evitar el error. Este atributo se usa para evitar el error cuando el servidor y el cliente presentan contenido diferente.
Puede encontrar más información sobre este atributo en la [documentación de React](https://reactjs.org/docs/dom-elements.html#suppresshydrationwarning 'Documentación de React').

<CH.Code style={{maxWidth: 'max-content', margin: '20px 0'}}>

```tsx DateAndHour.tsx mark=18,19,20,21
const DateAndHour = () => {
    const { locale } = useRouter();
    const [date, setDate] = React.useState(new Date());
    const day = date.toLocaleDateString(locale, { weekday: 'short' });
    const dayNumber = date.toLocaleDateString(locale, { day: 'numeric' });
    const month = date.toLocaleDateString(locale, { month: 'short' });
    const hour = date.toLocaleTimeString(locale, { hour: 'numeric', minute: 'numeric' });

    React.useEffect(() => {
        const interval = setInterval(() => {
            setDate(new Date());
        }, 60000);
        return () => clearInterval(interval);
    }, []);

    return (
        <div className={styles.dateAndHour}>
            <span suppressHydrationWarning>{day}</span>
            <span suppressHydrationWarning>{dayNumber}</span>
            <span suppressHydrationWarning>{month}</span>
            <span suppressHydrationWarning>{hour}</span>
        </div>
    );
};
```

</CH.Code>
