Erro: React.createElement: type is invalid

[santanamj]

const App = () => (
  <div className='app'>
    <Search />
    <UserInfo />
    <Actions />
    <Repos
      className='repos'
      title='Repositórios:'
      repos={[{
        name: 'Nome do repositório',
        link: '#'
      }]}
    />
     <Repos
      className='starred'
      title='Favoritos:'
      repos={[{
        name: 'Nome do repositório',
        link: '#'
      }]}
    />
  </div>
)
import PropTypes from 'prop-types'

const Repos = (className, title, repos) =>(
    <div className={className}>
    <h2>{title}</h2>
      <ul>
        {repos.map((repo, index) => (
            <li key={index}>
             <a href={repo.link}>{repo.name}</a>
            </li>
        ))}       
      </ul>    
    </div>
)
Repos.defaultProps = {
    className: ''  
}

Repos.propTypes = {
    className: PropTypes.string,
    title: PropTypes.string.isRequired,
    repos: PropTypes.array
}

export default Repos

Retornando o seguinte erro: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: object. Check the render method of AppContainer. Uncaught Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object. Check the render method of AppContainer.

@fdaciuk

[fdaciuk]

Oi @santanamj! Pelo que parece, faltou um return no seu AppContainer, dá uma olhada lá =)

[santanamj]

const renderApp = (NextApp) => {
  render( 
    <AppContainer>
      <NextApp />
    </AppContainer>,
    document.querySelector('[data-js="app"]')
  )
}
renderApp(App)
if (module.hot) {
  module.hot.accept('./app', () => {
    const NextApp = require('./app').default
    renderApp(NextApp)
  })
}

@fdaciuk

[fdaciuk]

Dentro do AppContainer @santanamj =)

[santanamj]

Dentro como?

<AppContainer>
      return(
      <NextApp />
      )
    </AppContainer>
//Assim, não funciona
  return(
<AppContainer>    
      <NextApp />
       </AppContainer>
   )
//assim também não.
Segui o exemplo da base dessa parte do curso
https://github.com/fdaciuk/workflow-reactjs/blob/master/src/index.js

@fdaciuk

[fdaciuk]

Não, lá dentro do componente mesmo, não no children. Consegue subir seu projeto em um repositório aqui no GitHub? Assim fica mais fácil eu ver como ele está pra te ajudar =)

[santanamj]

Segue: https://github.com/santanamj/react-exemplo1/blob/main/src/app.js

percebi que se remover os componentes externo e deixar o html dentro do App ele roda normalmente.

@fdaciuk

[fdaciuk]

Legal @santanamj! Já vi quais são os problemas com seu código:

• Você importou, em alguns componentes, o React de forma nomeada. A biblioteca exporta esse objeto como default, então você tem que também importar dessa forma (sem as chaves);
• No seu componente Repos você não fez destructuring das props. As props vêm em um único objeto, mas você criou o componente como se ele esperasse 3 argumentos.

Resolvendo esses problemas, seu app vai rodar sem problemas (só vai precisar corrigir os warnings do linter, mas isso não impede o app de rodar) =)

[santanamj]

Isso mesmo, o pior que não encontrava nada relacionado ao erro no google.

[fdaciuk]

Normalmente esse erro acontece quando você não está retornando um JSX válido, aí é sempre importante ir debugando pra entender pq o erro acontece =)