Recentemente comecei a codificar um simulador de voo usando ReactJs e HTML. Tenho usado o GitHub Codespaces para desenvolver o sim. Para visualizar o sim, iniciei um host local e tudo funcionou bem. Mas quando implantei a mesma coisa nas páginas do GitHub ou hospedei em qualquer site, nada apareceu. Apenas uma tela branca em branco. Embora eu tenha usado exatamente o mesmo código. Este código funcionou em todos os ambientes de codificação (VsCode, GitHub Codespaces, StackBlitz, Replit). Meu código pode ser encontrado em https://github.com/abingandabong/abingandabong.github.io
Isso ocorre porque o código do sim tem mais de 2000 linhas.
O erro está acontecendo porque o arquivo HTML no projeto final está tentando carregar
./main.jsx, que é um arquivo JSX, e não um arquivo JS. Para hospedar a página em seu próprio subdomínio .github.io, ele precisa de acesso ao arquivo .js construído estaticamente que é a saída, com o JSX transformado em JS.Seu package.json diz que você está executando o Vite, então você precisa executar
vite buildseunpm buildscript e certificar-se de que seu arquivo HTML de saída esteja apontando para o arquivo JS compilado, não para o arquivo JSX de origem.Há também uma configuração no repositório do GitHub que permitirá que você aponte para uma subpasta como a raiz do seu projeto hospedado, então se essa compilação colocar seu aplicativo em uma subpasta, aponte o repositório para essa subpasta, certifique-se de que todos os ativos estejam dentro dessa nova pasta (em relação ao local de onde você os está carregando) e então deverá funcionar.