MRW#09 - Githubissues

Rogerio-Feitor commented 3 years ago

Olá Ciuk, boa tarde! Estou com um problema. Meu localhost:3000 não está aceitando entrada de outro cliente. Acho que é porque já tenho alguns aplicativos no react mais moderno e que estão usando a porta 3000. Então resolvi trocar pela porta 8080 que estava funcionando perfeitamente. E depois de tudo realizado até a referida aula no título da issue, a página 8080 não quer carregar e me da como reposta um warning e um erro que estou mandando por aqui:

[HMR] Waiting for update signal from WDS...
warning.js:33 Warning: Failed prop type: Invalid prop "children" supplied to AppContainer. Expected a single React element with your app’s root component, e.g. <App />.
    in AppContainer
printWarning @ warning.js:33
warning @ warning.js:57
checkReactTypeSpec @ checkReactTypeSpec.js:80
validatePropTypes @ ReactElementValidator.js:151
createElement @ ReactElementValidator.js:194
patchedCreateElement @ patch.dev.js:164
(anonymous) @ index.js:9
__webpack_require__ @ bootstrap 7af5fc276bdbbd1f37ea:555
fn @ bootstrap 7af5fc276bdbbd1f37ea:86
(anonymous) @ bootstrap 7af5fc276bdbbd1f37ea:578
__webpack_require__ @ bootstrap 7af5fc276bdbbd1f37ea:555
(anonymous) @ bootstrap 7af5fc276bdbbd1f37ea:578
(anonymous) @ bootstrap 7af5fc276bdbbd1f37ea:578
ReactCompositeComponent.js:327 Uncaught TypeError: Cannot read property 'unmountComponent' of null
    at ReactCompositeComponentWrapper.performInitialMountWithErrorHandling (ReactCompositeComponent.js:327)
    at ReactCompositeComponentWrapper.mountComponent (ReactCompositeComponent.js:256)
    at Object.mountComponent (ReactReconciler.js:46)
    at ReactCompositeComponentWrapper.performInitialMount (ReactCompositeComponent.js:371)
    at ReactCompositeComponentWrapper.mountComponent (ReactCompositeComponent.js:258)
    at Object.mountComponent (ReactReconciler.js:46)
    at mountComponentIntoNode (ReactMount.js:104)
    at ReactReconcileTransaction.perform (Transaction.js:140)
    at batchedMountComponentIntoNode (ReactMount.js:126)
    at ReactDefaultBatchingStrategyTransaction.perform (Transaction.js:140)
performInitialMountWithErrorHandling @ ReactCompositeComponent.js:327
mountComponent @ ReactCompositeComponent.js:256
mountComponent @ ReactReconciler.js:46
performInitialMount @ ReactCompositeComponent.js:371
mountComponent @ ReactCompositeComponent.js:258
mountComponent @ ReactReconciler.js:46
mountComponentIntoNode @ ReactMount.js:104
perform @ Transaction.js:140
batchedMountComponentIntoNode @ ReactMount.js:126
perform @ Transaction.js:140
batchedUpdates @ ReactDefaultBatchingStrategy.js:62
batchedUpdates @ ReactUpdates.js:97
_renderNewRootComponent @ ReactMount.js:320
_renderSubtreeIntoContainer @ ReactMount.js:401
render @ ReactMount.js:422
(anonymous) @ index.js:8
__webpack_require__ @ bootstrap 7af5fc276bdbbd1f37ea:555
fn @ bootstrap 7af5fc276bdbbd1f37ea:86
(anonymous) @ bootstrap 7af5fc276bdbbd1f37ea:578
__webpack_require__ @ bootstrap 7af5fc276bdbbd1f37ea:555
(anonymous) @ bootstrap 7af5fc276bdbbd1f37ea:578
(anonymous) @ bootstrap 7af5fc276bdbbd1f37ea:578
client?cd17:37 [WDS] Hot Module Replacement enabled.

Se quiser posso criar um repositório no github e compartilhar com você o link do repositório. Att.,

Rogério Sousa

@fdaciuk

fdaciuk commented 3 years ago

Oi @Rogerio-Feitor! Sempre que der problemas assim, pode criar o repositório com o seu código e já linkar aqui na issue que eu já baixo e vejo o que está acontecendo :)

Sobre as portas, você só consegue usar um app por vez em cada porta, é normal :)

Pra não se perder, se já estiver com um app rodando na porta 3000, pode iniciar o outro na 3001, e outro na 3002 e assim por diante :)

Assim fica mais fácil de gerenciar :)

Você também pode derrubar um app que está rodando em uma porta pra subir outro app na mesma porta, funciona também :)

Sobre o erro: manda o repo com o código que eu olho aqui pra você e te ajudo a identificar o problema :)

Rogerio-Feitor commented 3 years ago

Prezado, vai o link do repositório onde subi os arquivos que eu escrevi até a aula referida no título dessa issue. As dependências não estão instaladas. Eu tive um problema na hora de subir o código original com as dependências e acabei me enrolando com o git. Daí transferi os arquivos que continham código para outra pasta e subi esses arquivos, mas sem nenhuma dependência instalada. Eu acho!!!

Se puder me ajudar eu fico muito agradecido. Eu queria terminar seu curso antes que as aulas da faculdade voltem e então estou um pouco atrasado. Se puder dar uma certa atenção a esse caso eu agradeço.

https://github.com/Rogerio-Feitor/reactwebpack

Att., Rogério Sousa @fdaciuk

fdaciuk commented 3 years ago

Oi @Rogerio-Feitor! O ideal é subir sem as dependências instaladas mesmo. Sempre que criar um repositório, antes de comitar, crie um arquivo chamado .gitignore (inicia com ponto mesmo) e coloque como conteúdo dele:

node_modules

Isso vai fazer o git ignorar esse diretório. Quando você fizer o commit do projeto, esse diretório não vai ser adicionado ao repositório :)

Vou dar uma olhada no projeto sim, e retorno em breve com uma resposta :)

fdaciuk commented 3 years ago

@Rogerio-Feitor, tem dois problemas no seu código: o primeiro é que faltou o arquivo .babelrc (talvez você tenha ele no seu PC, e faltou comitar, pela mensagem de erro).

Mas se você ainda não tem esse arquivo, o conteúdo dele deve ser esse aqui.

Aí o problema que está causando o erro, é que tem uma vírgula aqui e aqui :)

Removendo essas vírgulas que estão sobrando, vai funcionar como deveria :)

Rogerio-Feitor commented 3 years ago

@fdaciuk

O webpack ainda está apresentando alguns problemas:

- O webpackmap não está reconhecendo o arquivo app.js dentro do diretório src.
- Esse arquivo não está sendo renderizado.
- Tudo funciona quase perfeitamente. não dá retorno nenhum de erro.
- A não ser um token inesperado na linha 6 do arquivo index.js
- É exatamente o tipo jsx de apresentar um elemento ao código. esse elemento é o h1, Título.
- Estou lhe mandando mais uma vez o link do repositório atualizado.
- Não entendo porque não está funcionando se as dependências são as mais atualizadas.
- Espero poder me ajudar.

https://github.com/Rogerio-Feitor/reactwebpack

Att., Rogério Rodrigues Sousa

fdaciuk commented 3 years ago

Fala @Rogerio-Feitor! O seu projeto anterior estava correto, só precisava ajustar aqueles pontos que comentei.. agora esse tem alguns outros problemas, vamos lá:

No package.json, a entrada deveria ser scripts. Você usou script (sem o último s);
Você inverteu os conteúdos dos arquivos src/index.js e src/app.js. O que está no index deveria estar no app, e vice-versa;
Nessa linha você escreveu mudule ao invés de module :)

Resolvendo isso, pode subir o servidor que vai rodar certinho :)

Rogerio-Feitor commented 3 years ago

Valeu @fdaciuk ! Deu tudo certinho....

fdaciuk commented 3 years ago

Show! Qualquer coisa, só avisar :)

da2k / curso-reactjs-ninja

MRW#09 #527