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

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

<GoogleAdsense />

When you try to start a server on a port that is already being used by another program, you will get the following 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>

## Find the process that is using the port

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

## Kill the process

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

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

</CH.Code>



# Possible solution for NPM - Failed to replace env in config: $\{NPM_TOKEN}

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

<GoogleAdsense />

In this short post I am going to show a solution for the `Failed to replace env in config: ${{NPM_TOKEN}` error that occurs when trying to run a yarn or npm command.

You may have encountered this error at some point when trying to run a yarn or npm command. In my case it was
because I published one of my libraries on github and in order to install it from github, I needed a token.
This token is generated in github and stored in the system environment variables.

But it is necessary to create an .npmrc file in the root of the project and add the following content:

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

What can happen is that you leave this file outside the project folder and save it in the user folder,
for example in my case I saved it in the folder `C:\Users\xabierlameiro\.npmrc` and that's why I got the error.

To solve it, what I did was:

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

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

</CH.Code>

It showed me the paths where I was looking for the .npmrc file and I realised that I was using it from the user folder.

I **_deleted_** it from the user folder and recreated it in the root of the project and it no longer gave me the error.

> I hope that if the same thing happens to you, it will help.



# Uncaught Error: Minified React error

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

<GoogleAdsense />

When using React, you may encounter the following 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.`
This error is caused by the use of dates in the application. The error appears when the browser date and time are not in the same format as the date and time of the server.

How I solved the problem?

## Code with the 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>

## Code without the error

Use the `suppressHydrationWarning` attribute to avoid the error. This attribute is used to avoid the error when the server and the client render different content.
More information about this attribute can be found in the [React documentation](https://reactjs.org/docs/dom-elements.html#suppresshydrationwarning 'React Documentation').

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


Possible solution for NPM - Failed to replace env in config: ${NPM_TOKEN}