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

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

<GoogleAdsense />

Se tenta iniciar un servidor nun porto que xa está a ser utilizado por outro programa, obterá o seguinte erro:

<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>

## Atopa o proceso que está a usar o porto

<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 o 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 />

Neste breve post vou ensinar unha solución para o erro `Failed to replace env in config: ${NPM_TOKEN}` que se produce cando se tenta executar un comando de yarn ou npm.

Pode ser que nalgún momento atopáchesche con este erro ao tentar executar un comando de yarn ou npm. No meu caso foi
por que publique unha das miñas librerias en github e para poder instalala desde github, necesitaba un token.
Este token xérase en github e se garda nas variables de contorna do sistema.

Pero é necesario crear un arquivo .npmrc na raiz do proxecto e engadir o seguinte contido:

<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>

O que pode ocorrer é que deixes est arquivo fóra do cartafol do proyeccto e gárdelo no cartafol de usuario,
por exemplo no meu caso gardeino no cartafol `C:\Users\xabierlameiro\.npmrc` e por iso dábame o erro.

Para solucionalo, o que fixen foi:

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

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

</CH.Code>

Ensinoume os roteiros onde estaba a buscar o arquivo .npmrc e deime conta que o estaba usando desde no cartafol de usuario.

**_Elimineino_** do cartafol de usuario e volvino a crear na raiz do proxecto e xa non me daba o erro.

> Espero que se vos pasa o mesmo, sírvavos de axuda.



# Erro non detectado: erro de reacción minimizado

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

<GoogleAdsense />

Ao usar React, pode atopar o seguinte erro: `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 erro é causado polo uso de datas na aplicación. O erro aparece cando a data e a hora do navegador non teñen o mesmo formato que a data e a hora do servidor.

Como resolvín o problema?

## Código co erro

<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 sen o erro

Utilice o atributo `suppressHydrationWarning` para evitar o erro. Este atributo úsase para evitar o erro cando o servidor e o cliente presentan contido diferente.
Pode atopar máis información sobre este atributo na [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>
