Entrar Ainda não tem acesso?
Solucionado (ver solução)
Solucionado
(ver solução)
9
respostas

Target container is not a DOM element

Referente ao curso React parte 1: componentes reutilizáveis para sua webapp

por Luis Fernando Teixeira Silva
| 69k xp | 11 posts

Olá galera td bem? Gostaria de um help.

Estou tendo problemas em iniciar o app depois que realizei as configurações do react-router. No console aparece o seguinte erro:

Uncaught Error: Target container is not a DOM element.
    at invariant (react-dom.development.js:57)
    at legacyRenderSubtreeIntoContainer (react-dom.development.js:19687)
    at Object.render (react-dom.development.js:19776)
    at Module../src/index.js (index.js:25)
    at __webpack_require__ (bootstrap:782)
    at fn (bootstrap:150)
    at Object.0 (serviceWorker.js:131)
    at __webpack_require__ (bootstrap:782)
    at checkDeferredModules (bootstrap:45)
    at Array.webpackJsonpCallback [as push] (bootstrap:32)
    at main.chunk.js:1

Alguém também já teve esse erro? Ou sabe o que ele pode significar?

Obs: Deixo logo abaixo as dependencias que instalei ao longo do 1° curso de react e também o meu index.js

    "pubsub-js": "^1.7.0",
    "react": "^16.6.0",
    "react-dom": "^16.6.0",
    "react-router-dom": "^4.1.1",

================================================================

const routes = (
    <App>
        <Switch>
            <Route exact path="/" component={Home} />
            <Route path="/author" component={AuthorBox} />
            <Route path="/book" />
        </Switch>
    </App>
);

ReactDOM.render(ReactDOM.render(
    (
        <Router>
            {routes}
        </Router>
    ),
    document.getElementById('root')
));
9 respostas
por André Victor Ruiz Pedroso
| 2101.7k xp | 3838 posts
Moderador Analista Pleno

Parece que não está achando o id 'root' no HTML , consegue postar seu código HTML aqui também.

por Luis Fernando Teixeira Silva
| 69k xp | 11 posts

Consigo sim, segue o meu html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="theme-color" content="#000000">
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
    <title>React App</title>
  </head>
  <body>
    <noscript>
      You need to enable JavaScript to run this app.
    </noscript>
    <div id="root"></div>
  </body>
</html>

Estranho, pois o meu html contém a div com o id=root. Eu tentei comentar a configuração que fiz no index.js e apenas chamar meu App.js, mas o erro ainda persiste.

por André Victor Ruiz Pedroso
| 2101.7k xp | 3838 posts
Moderador Analista Pleno

Tenta usar o body como seu target para a renderização e veja se funciona.

por Luis Fernando Teixeira Silva
| 69k xp | 11 posts

Não deu certo colocar o body como meu target :/

Alguem tem mais alguma sugestão?

por André Victor Ruiz Pedroso
| 2101.7k xp | 3838 posts
Moderador Analista Pleno

Difícil essa, joguei seu código no CodeSandbox https://codesandbox.io/s/1y36j3y8jl dá uma olhada no erro, lá ele aparece diferente.

por André Victor Ruiz Pedroso
| 2101.7k xp | 3838 posts
Moderador Analista Pleno

Tentar trocar no seu código pra isso 

ReactDOM.render(
    (<Router history={browserHistory}>
        <Route path="/" component={App}/>
        <Route path="/autor"/>
        <Route path="/livro"/>
    </Router>), 
document.getElementById('root'));
por Luis Fernando Teixeira Silva
| 69k xp | 11 posts

Então, pelo o que vi na versão 4 do react router essa configuração do history não funciona mais, eu cheguei até a achar um artigo ensinando a migrar da ver.2/3 para a ver.4, mas estou tomando o mesmo erro, hahha

por André Victor Ruiz Pedroso
| 2101.7k xp | 3838 posts
Moderador Analista Pleno

Kkkk fogo demais. Estou ficando sem idéias. Quando é assim cara continua o curso que mais pra frente você tem o estalo e a solução vem a cabeça. As vezes temos que deixar o subconsciente programando no nosso lugar rsrsrs.

solução!
por Luis Fernando Teixeira Silva
| 69k xp | 11 posts

Consegui resolver, não sei o que fiz, apenas refiz a aula, ahhaha

Apps.js:

class App extends Component {

  render() {
    return (
      <div id="layout">
        <a href="#menu" id="menuLink" className="menu-link">
          <span></span>
        </a>
        <SideMenu />
        <Home />
        {this.props.children}
      </div>
    );
  }
}

===========================================

index.js

const routes = (
    <App>
        <Switch>
            <Route exact path="/" component={Home} />
            <Route path="/author" component={Author} />
            {/* <Route path="/livro" component={LivroAdmin} /> */}
        </Switch>
    </App>
);

ReactDOM.render((
    <Router>
        {routes}
    </Router>

), document.getElementById('root'));

As demais classes estão parecidas com a do projeto.