Problema com live reload no React.Js
Contextualização
Um belo dia, resolvi começar a estudar o desenvolvimento de aplicações usando React com Typescript, uma combinação maravilhosa, mas que me custou alguns dias até encontrar a solução.
Como qualquer um que iniciar um projeto com react e ts, escrevia esse mesmo comando. criando o ambiente virtual
yarn create react-app aplicacao --template=typescript
Todavia, logo quando tinha minha aplicação iniciada, e escrevia qualquer coisa dentro da pasta src não tinha nenhuma atualização no browser (estava usando o brave).
Pensei que estivesse faltando alguma coisa importante dentro no node_modules ou até mesmo uma configuração errada no package.json, mas infelizmente não era nenhum dessas.
Vasculhei na internet, procurando alguma coisa que me ajudasse, até que encontrei algo que me salvou. Não era preciso, apagar node_modules, yarn.lock, ou qualquer coisa que envolvesse meu projeto. Era preciso arrumar meu Debian.
Erro
Uma coisa que percebi quase todas as vezes que iniciava minha aplicação (yarn start) é que aparecia essa mensagem no terminal.
Error: enospc: system limit for number of file watchers reached
Não fazia ideia do que era isso, e como um “programador” normal, fiz um copy/past e consequentemente encontrei a solução dos meus problemas.
Solução
Eu encontrei essa solução em várias buscas, mas gostaria de deixar a do Fábio Berbert (criador do melhor fórum sobre Linux).
Primeiramente, façamos uma verificação da quantidade de watches que temos no nosso sistema operacional.
cat /proc/sys/fs/inotify/max_user_watches
Se retornar 8192 então temos um problema.
Para corrigir esse problema, basta aumentar o número de watches.
echo fs.inotify.max_user_watches=524288 | sudo tee -a /etc/sysctl.conf && sudo sysctl -p
Basta fazer uma nova verificação e veremos 524288.
cat /proc/sys/fs/inotify/max_user_watches
Agora você está pronto para detonar na web!