Executando verificação de segurança...
1
vitormarkis
1 min de leitura ·

Ajuda com React: tela em branco pra sempre

Att: o problema está na exportação dos svgs na pasta src/styles/Icons.ts, mas ainda não sei o exato motivo

Estou criando um projeto com React/Typescript usando Vite, já tem um tamanho considerável, mas depende a mudança que eu faço, ele fica em loading pra sempre, e não fecha o servidor no terminal. A tela não aparece nenhum erro, nem no console nem no terminal.

Link do projeto: https://github.com/vitormarkis/cloning-twitter

Estou pensando em criar um projeto novo do zero, e ir passando arquivo por arquivo até encontrar o problema.

Versões:
Vite v4.0.4
React 18.0.26
React DOM 18.0.9
vitejs/pluginjs 3.0.0
typescript 4.9.3

Carregando publicação patrocinada...
1
1
vitormarkis
Autor
Autor

Eu atualizei o post colocando o link do projeto, foda que eu n tenho ideia do que seja, achei que poderia ser a importação do styled icons que não estava encontrando o elemento que eu estava desestruturando dele, por isso a demora sem aparacer erros de log nem na tela, mas já consertei os caminhos, ja chequei e ta tudo ok.

1
taodutra

Utilizando o seu repo, todos os testes que fiz carregaram instantaneamente.

Mudando estrutura, conteúdo e estilo.

Poderia descrever que tipo de mudança que te dá este loading eterno?

Versões de execução:

node v18.12.1
npm v8.19.2

1
vitormarkis
Autor
Autor

taodutra, o problema estava no caminho dos SVGs importados e exportados no src/styles/Icons, onde pra você, os caminhos ele deve ter encontrado os SVGs, mas no meu ele não encontrou, ai tive que usar o caminho relativo, e a partir dai ele voltou a funcionar, acho que tem alguma coisa a ver com dependencia global e local, se vc puder me tirar essa duvida

aparentemente ele entrava em loop tentando achar o bendito svg em um caminho e nao encontrava

1
taodutra

Oi Vitor,

Fiz os seguintes testes:

  • Retirei a estrutura relativa dos paths
  • Importei novos ícones
  • Os exportei
  • Utilizei nas páginas

Tudo funcionou perfeitamente.

Como estava:

export { Home } from '../../node_modules/@styled-icons/boxicons-solid/Home';

Como deixei:

export { Home } from '@styled-icons/boxicons-solid/Home';

Buscando casos similares ao seu, encontrei vários resolvendo esta solução de Vite com styled-icons usando isto.

https://www.npmjs.com/package/vite-plugin-babel-macros

Espero que te ajude.

1
1
vitormarkis
Autor
Autor

Eu atualizei o post colocando o link do projeto, foda que eu n tenho ideia do que seja, achei que poderia ser a importação do styled icons que não estava encontrando o elemento que eu estava desestruturando dele, por isso a demora sem aparacer erros de log nem na tela, mas já consertei os caminhos, ja chequei e ta tudo ok.

1
CarlosZiegler

talvez o hrm ( hot refresh module ) nao esteja atualizando os modulos ou algo assim, mas normalmente isso ficaria explicito. Sem mais contexto ficaria dificil ajudar.

1