Erro não capturado: Violação invariável: o tipo de elemento é inválido: espera-se uma sequência (para componentes internos) ou uma classe / função, mas obtém: object

Estou recebendo este erro:

Erro não capturado: Violação invariável: o tipo de elemento é inválido: espera-se uma sequência (para componentes internos) ou uma classe / função (para componentes compostos), mas obtém: object.

Este é o meu código:

var React = require('react')
var ReactDOM =  require('react-dom')
var Router = require('react-router')
var Route = Router.Route
var Link = Router.Link

var App = React.createClass({
  render() {
    return (
      <div>
        <h1>App</h1>
        <ul>
          <li><Link to="/about">About</Link></li>
        </ul>
      </div>
    )
  }
})

var About = require('./components/Home')
ReactDOM.render((
  <Router>
    <Route path="/" component={App}>
      <Route path="about" component={About} />
    </Route>
  </Router>
), document.body)

Meu Home.jsxarquivo:

var React = require('react');
var RaisedButton = require('material-ui/lib/raised-button');

var Home = React.createClass({
  render:function() {
    return (
        <RaisedButton label="Default" />
    );
  },
});

module.exports = Home;

No meu caso ( usando o Webpack ), havia a diferença entre:

import {MyComponent} from '../components/xyz.js';

vs

import MyComponent from '../components/xyz.js';

O segundo funciona enquanto o primeiro está causando o erro. Ou o contrário.

você precisa exportar o padrão ou exigir (caminho). padrão

var About = require('./components/Home').default

Você acabou de modularizar algum dos seus componentes React? Se sim, você receberá este erro se esqueceu de especificar module.exports , por exemplo:

componente / código válido anteriormente não modularizado:

var YourReactComponent = React.createClass({
    render: function() { ...

componente / código modularizado com module.exports :

module.exports = React.createClass({
    render: function() { ...

Se você receber esse erro, talvez seja porque você está importando o link usando

import { Link } from 'react-router'

em vez disso, pode ser melhor usar

importar {Link} de ' react-router-dom '
                      ^ -------------- ^

Eu acredito que este é um requisito para a versão 4 do roteador de reação

https://github.com/rackt/react-router/blob/e7c6f3d848e55dda11595447928e843d39bed0eb/examples/query-params/app.js#L4 Router também é uma das propriedades de react-router. Portanto, mude seus módulos e exija código como este:

  var reactRouter = require('react-router')
  var Router = reactRouter.Router
  var Route = reactRouter.Route
  var Link = reactRouter.Link

Se você deseja usar a sintaxe do ES6, use o link ( import), use babel como auxiliar.

BTW, para fazer seus trabalhos de código, podemos adicionar {this.props.children}no App, como

render() {
  return (
    <div>
      <h1>App</h1>
      <ul>
        <li><Link to="/about">About</Link></li>
      </ul>
      {this.props.children}
    </div>

  )
}

Não fique surpreso com a lista de respostas para uma única pergunta. Existem várias causas para esse problema;

Para o meu caso, o aviso foi

warning.js: 33 Aviso: React.createElement: type é inválido - espera-se uma sequência (para componentes internos) ou uma classe / função (para componentes compostos), mas obteve: indefinido. Você provavelmente esqueceu de exportar seu componente do arquivo em que está definido. Verifique seu código em index.js: 13.

Seguido pelo erro

invariant.js: 42 Erro não capturado: O tipo de elemento é inválido: espera-se uma sequência (para componentes internos) ou uma classe / função (para componentes compostos), mas obteve: indefinido. Você provavelmente esqueceu de exportar seu componente do arquivo em que está definido.

Não consegui entender o erro, pois ele não menciona nenhum método ou nome de arquivo. Só consegui resolver depois de olhar para este aviso, mencionado acima.

Eu tenho a seguinte linha no index.js.

<ConnectedRouter history={history}>

Quando pesquisei pelo erro acima com a palavra-chave "ConnectedRouter" , encontrei a solução em uma página do GitHub.

O erro ocorre porque, quando instalamos o react-router-reduxpacote, por padrão instalamos este. https://github.com/reactjs/react-router-redux, mas não a biblioteca real.

Para resolver esse erro, instale o pacote apropriado especificando o escopo npm com @

npm install react-router-redux@next

Você não precisa remover o pacote instalado incorretamente. Será substituído automaticamente.

Obrigado.

PS: Mesmo aviso ajuda você. Não negligencie o aviso apenas olhando o erro sozinho.

No meu caso, um dos módulos filhos exportados não estava retornando um componente de reação adequado.

const Component = <div> Content </div>;

ao invés de

const Component = () => <div>Content</div>;

O erro mostrado foi para o pai, portanto não foi possível descobrir.

No meu caso, isso foi causado por símbolos de comentários errados. Isto está errado:

<Tag>
    /*{ oldComponent }*/
    { newComponent }
</Tag>

Isto está correto:

<Tag>
    {/*{ oldComponent }*/}
    { newComponent }
</Tag>

Observe os colchetes

Eu tenho o mesmo erro: ERRO FIX !!!!

Eu uso 'react-router-redux' v4, mas ela é ruim. Após a npm instalar react -router-redux @ next , estou no "react-router-redux": "^ 5.0.0-alpha.9",

E É TRABALHO

Entendi isso import App from './app/';esperando que ele importasse ./app/index.js, mas importou ./app.json.

Eu estava tendo o mesmo problema e percebi que estava fornecendo um componente React indefinido na marcação JSX. O problema é que o componente de reação a renderizar foi calculado dinamicamente e acabou sendo indefinido!

O erro declarou:

Violação invariável: o tipo de elemento é inválido: esperava uma sequência (para componentes internos) ou uma classe / função (para componentes compostos), mas obteve: indefinido. Você provavelmente esqueceu de exportar seu componente do arquivo em que está definido. Verifique o método de renderização de C.,

O exemplo que produz este erro:

var componentA = require('./components/A');
var componentB = require('./components/B');

const templates = {
  a_type: componentA,
  b_type: componentB
}

class C extends React.Component {
  constructor(props) {
    super(props);
  }
  
  // ...
  
  render() {
    //Let´s say that depending on the uiType coming in a data field you end up rendering a component A or B (as part of C)
    const ComponentTemplate = templates[this.props.data.uiType];
    return <ComponentTemplate></ComponentTemplate>
  }
  
  // ...
}

O problema era que um "uiType" inválido foi fornecido e, portanto, estava produzindo indefinido como resultado:

templates['InvalidString']

Apenas como uma rápida adição a isso. Eu estava tendo o mesmo problema e enquanto o Webpack estava compilando meus testes e o aplicativo estava funcionando bem. Quando estava importando meu componente para o arquivo de teste, estava usando o caso incorreto em uma das importações e isso estava causando o mesmo erro.

import myComponent from '../../src/components/myComponent'

Deveria ter ficado

import myComponent from '../../src/components/MyComponent'

Observe que o nome da importação myComponentdepende do nome da exportação dentro do MyComponentarquivo.

Teve um problema semelhante com as versões mais recentes do React Native, a partir de 0,50.

Para mim, havia uma diferença entre:

import App from './app'

e

import App from './app/index.js'

(este último corrigiu o problema). Levei horas para pegar essa nuance estranha e difícil de notar :(

Outra solução possível, que funcionou para mim:

Atualmente, react-router-reduxestá na versão beta e npm retorna 4.x, mas não 5.x. Mas o @types/react-router-redux5.x retornado Portanto, foram utilizadas variáveis ​​indefinidas.

Forçar o NPM / Yarn a usar 5.x resolveu isso para mim.

Dado o seu erro de:

'Uncaught Error: Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function but got: object'

Você tem 2 opções:

1. Seu arquivo de exportação pode ter a palavra defaultcomo Em export default class ____.... seguida, sua importação precisará evitar usá {}-lo. Como emimport ____ from ____

2. Evite usar a palavra padrão. Em seguida, sua exportação se parece com export class ____... Então sua importação deve usar o {}. Gostarimport {____} from ____

No meu caso, a importação estava acontecendo implicitamente devido a uma biblioteca.

Eu consegui consertá-lo mudando

export class Foo

para

export default class Foo.

Eu encontrei esse erro quando tinha um arquivo .jsx e .scss no mesmo diretório com o mesmo nome raiz.

Então, por exemplo, se você tem Component.jsxe está Component.scssna mesma pasta e tenta fazer isso:

import Component from ./Component

O Webpack aparentemente fica confuso e, pelo menos no meu caso, tenta importar o arquivo scss quando eu realmente quero o arquivo .jsx.

Consegui corrigi-lo renomeando o arquivo .scss e evitando a ambiguidade. Eu também poderia ter importado explicitamente o Component.jsx

E no meu caso, estava faltando um ponto e vírgula na decodificação de importação em um dos meus submódulos.

Corrigido alterando isso:

import Splash from './Splash'

para isso:

import Splash from './Splash';

No meu caso, eu estava usando a exportação padrão, mas não exportando um functionou React.Component, mas apenas um JSXelemento, ou seja,

Erro:

export default (<div>Hello World!</div>)

Trabalho :

export default () => (<div>Hello World!</div>)

Além de import/ exportquestões mencionadas. Eu achei usando React.cloneElement()para adicionarprops a um elemento filho e, em seguida, renderizá-lo me deu o mesmo erro.

Eu tive que mudar:

render() {
  const ChildWithProps = React.cloneElement(
    this.props.children,
    { className: `${PREFIX}-anchor` }
  );

  return (
    <div>
      <ChildWithProps />
      ...
    </div>
  );
}

para:

render() {
  ...
  return (
    <div>
      <ChildWithProps.type {...ChildWithProps.props} />
    </div>
  );
}

Veja os React.cloneElement() documentos para mais informações.

Eu recebi esse erro no roteamento de reação, o problema era que eu estava usando

<Route path="/" component={<Home/>} exact />

mas foi rota errada requer componente como uma classe / função, então eu mudei para

<Route path="/" component={Home} exact />

e funcionou. (Evite as chaves ao redor do componente)

Para mim, meus componentes estilizados foram definidos após minha definição de componente funcional. Isso só acontecia na encenação e não localmente para mim. Depois que mudei meus componentes estilizados para cima da minha definição de componente, o erro desapareceu.

Isso significa que alguns dos seus componentes importados foram declarados incorretamente ou inexistentes

Eu tive um problema semelhante, eu fiz

import { Image } from './Shared'

mas quando examinei o arquivo compartilhado, não tinha um componente 'Image', e sim um componente 'ItemImage'

import { ItemImage } from './Shared';

Isso acontece quando você copia o código de outros projetos;)

Eu tive um problema com React.Fragment, porque a versão do meu reagir era < 16.2, então me livrei dele.

@Balasubramani M me salvou aqui. Queria adicionar mais um para ajudar as pessoas. Esse é o problema quando você cola muitas coisas e fica despreocupado com as versões. Atualizei uma versão do material-ui e preciso mudar

import Card, {CardContent, CardMedia, CardActions } from "@material-ui/core/Card"; 

para isso:

import Card from '@material-ui/core/Card';
import CardActions from '@material-ui/core/CardActions';
import CardContent from '@material-ui/core/CardContent';
import CardMedia from '@material-ui/core/CardMedia';

Eu tive o mesmo problema e o problema era que alguns arquivos js não foram incluídos no pacote dessa página específica. Tente incluir esses arquivos e o problema pode ser corrigido. Eu fiz isso:

.Include("~/js/" + jsFolder + "/yourjsfile")

e resolveu o problema para mim.

Isso foi enquanto eu estava usando o React no Dot NEt MVC

Eu descobri outro motivo para esse erro. Tem a ver com o CSS-in-JS retornando um valor nulo para o JSX de nível superior da função de retorno em um componente React.

Por exemplo:

const Css = styled.div`
<whatever css>
`;
export function exampleFunction(args1) {
  ...
  return null;
}

export default class ExampleComponent extends Component {
...
render() {
const CssInJs = exampleFunction(args1);
  ...
  return (
    <CssInJs>
      <OtherCssInJs />
      ...
    </CssInJs>
  );
}

Eu receberia este aviso:

Aviso: React.createElement: type é inválido - espera-se uma sequência (para componentes internos) ou uma classe / função (para componentes compostos), mas obteve: null.

Seguido por este erro:

Erro não capturado: o tipo de elemento é inválido: esperava uma sequência (para componentes internos) ou uma classe / função (para componentes compostos), mas obteve: null.

Eu descobri que era porque não havia CSS com o componente CSS-in-JS que eu estava tentando processar. Corrigi-o certificando-se de que havia CSS sendo retornado e não um valor nulo.

Por exemplo:

const Css = styled.div`
<whatever css>
`;
export function exampleFunction(args1) {
  ...
  return Css;
}

export default class ExampleComponent extends Component {
...
render() {
const CssInJs = exampleFunction(args1);
  ...
  return (
    <CssInJs>
      <OtherCssInJs />
      ...
    </CssInJs>
  );
}

Estou recebendo quase o mesmo erro:

Erro não capturado (prometido): o tipo de elemento é inválido: espera-se uma sequência (para componentes internos) ou uma classe / função (para componentes compostos), mas obtém: object.

Eu estava tentando importar um componente funcional puro de outra biblioteca de nós que minha equipe desenvolveu. Para corrigi-lo, tive que mudar para uma importação absoluta (referenciando o caminho para o componente interno node_modules) de

importar FooBarList de 'team-ui';

para

importar FooBarList de 'team-ui / lib / components / foo-bar-list / FooBarList';

No meu caso, acabou sendo o componente externo importado assim:

import React, { Component } from 'react';

e então declarou como:

export default class MyOuterComponent extends Component {

onde um componente interno importou o React:

import React from 'react';

e pontilhada para declaração:

export default class MyInnerComponent extends ReactComponent {

No meu caso, demorei muito tempo para procurar e verificar várias maneiras, mas apenas corrigi-lo dessa maneira: remova "{", "}" ao importar um componente personalizado:

import OrderDetail from './orderDetail';

Meu caminho errado foi:

import { OrderDetail } from './orderDetail';

Como no arquivo orderDetail.js, eu exportei OrderDetail como a classe padrão:

class OrderDetail extends Component {
  render() {
    return (
      <View>
        <Text>Here is an sample of Order Detail view</Text>
      </View>
    );
  }
}

export default OrderDetail;