Aula 11 Uncaught Invariant Violation

GuyRoberto commented 4 years ago

Estou na aula 11 e não está funcionando. Aparece uma barra superior com o texto App Ready. Não gera o código (h1).

Att.

app.js

'use strict'

var React = require('react')

var Title = React.createClass({
    render: function () {
        return React.createElement('h1', null, 'Título')
    }
})

module.exports = Title

index.js

'use strict'

var React = require('react')
var ReactDOM = require('react-dom')
var Title = require('./app')

ReactDOM.render(
    React.createElement(Title),
    document.querySelector('[data-js="app"]')
)

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>

    <script src="/dist/bundle.js"></script>

    <div data-js="app"></div>
</body>
</html>

webpack.config.js

'use strict'

const path = require('path')

module.exports = {
    entry: path.join(__dirname, 'src' , 'index'),
    output: {
        path: path.join(__dirname, 'dist'),
        publicPath: '/static/',
        filename: 'bundle.js'        
    }
}

Resultado: Na console apresenta a mensagem: Uncaught Invariant Violation: _registerComponent(...): Target container is not a DOM element.

<html>
    <head>
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
            <meta charset="utf-8">
                <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
                    <script type="text/javascript" charset="utf-8" src="/__webpack_dev_server__/live.bundle.js"/>
                    <style type="text/css">*,:after,:before{box-sizing:border-box}body,html{margin:0;padding:0;height:100%;font-family:Helvetica Neue,Helvetica,Arial,sans-serif}.header{width:100%;height:30px;padding:0 10px;border-left:10px solid #a3be8c;font-size:12px;line-height:30px;color:#eff1f5;background:#343d46;overflow:hidden}#iframe{position:absolute;top:30px;right:0;bottom:0;left:0;width:100%;height:-ms-calc(100% - 30px);height:-o-calc(100% - 30px);height:calc(100% - 30px);border:0}#errors{width:100%;margin:0;padding:10px;font-family:monospace;font-size:14px;line-height:1.4;color:#eff1f5;background:#bf616a;overflow:auto}#okness{font-weight:700}</style>
                </head>
                <body>
                    <div class="header" style="">
                        <span id="okness"/>
                        <span id="status">App ready.</span>
                    </div>
                    <pre id="errors" style="display: none;"/>
                    <div id="warnings"/>
                    <iframe id="iframe" src="/" allowfullscreen="" style="display: block;"/>
                </body>
            </html>

@fdaciuk

fdaciuk commented 4 years ago

Oi @GuyRoberto! Inicialmente parece estar tudo certo. Consegue subir seu projeto no GitHub pra eu dar uma olhada?

GuyRoberto commented 4 years ago

Oi Fernando, acho que consegui subir para https://github.com/GuyRoberto/ninja-aula04

Obrigado

fdaciuk commented 4 years ago

@GuyRoberto dei uma olhada aqui no seu projeto, e tem alguns problemas:

parece que você não está seguindo as versões do arquivo de dependências. Remova o webpack e webpack-cli do seu projeto, e instale o webpack@1, com os comandos abaixo:

npm uninstall webpack webpack-cli

Depois:

npm install --save-dev webpack@1

Não esqueça de remover essa versão também globalmente:

npm uninstall -g webpack webpack-cli

É importante seguir essas versões exatas para não ter erros enquanto você acompanha o curso, ok? :)

E então, pra resolver o problema com a mensagem de erro que está aparecendo pra você, é só você colocar a tag script no final do arquivo html, antes do fechamento da tag body :)

GuyRoberto commented 4 years ago

Tudo ok, obrigado Fernando.

fdaciuk commented 4 years ago

Perfeito meu caro! Qualquer coisa, só avisar :D

yurischulz commented 3 years ago

Oi @fdaciuk, tudo certo?

Estou tendo este mesmo problema, as minhas dependências estão com o mesmo versionamento indicado no arquivo de Versões de Dependências, veja:

  "devDependencies": {
    "webpack": "^1.15.0",
    "webpack-dev-server": "^1.16.5"
  },
  "dependencies": {
    "react": "^15.4.2",
    "react-dom": "^15.4.2"
  }
}

Pode ser algum problema relacionado a versão do Node? Estou utilizando a versão 10.18.0.

yurischulz commented 3 years ago

Salve @fdaciuk, achei o problema! Parece que o bundle.js precisa estar dentro da tag <body>, na última linha.

fdaciuk commented 3 years ago

Isso mesmo @yurischulz! =) Qualquer coisa, sempre dá pra comparar o seu código com os códigos feitos na aula. Todos eles estão aqui no repo =)

da2k / curso-reactjs-ninja

Aula 11 Uncaught Invariant Violation #487