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

Potrzebujesz export default lub require (path).default

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

Czy właśnie zmodularyzowałeś któryś ze swoich komponentów Reactowych? Jeśli tak, pojawi się ten błąd, jeśli zapomniałeś podać moduł .eksport , na przykład:

Niezmodułowany wcześniej ważny komponent/kod:

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

Modułowy komponent / kod z modułem .eksport :

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

Jeśli pojawi się ten błąd, może to być spowodowane importowaniem linku za pomocą

import { Link } from 'react-router'

Zamiast tego, może lepiej użyć

import { Link } from 'react-router-dom'
                      ^--------------^

Uważam, że jest to wymóg dla reactowego routera w wersji 4

Nie daj się zaskoczyć listą odpowiedzi na jedno pytanie. Istnieją różne przyczyny tego problemu;

W moim przypadku Ostrzeżenie było

Ostrzeżenie.js: 33 Warning: React.createElement: type jest nieprawidłowy -- oczekiwano ciągu znaków (Dla komponentów wbudowanych) lub klasy / funkcji (Dla komponentów złożonych), ale otrzymano: undefined. Prawdopodobnie zapomniałeś wyeksportować komponent z pliku, w którym został zdefiniowany. Sprawdź swój kod w indeksie.js: 13.

Po którym następuje błąd

Niezmienny.js: 42 Uncaught Error: Element type is invalid: expected a string (for built-in components) or a class / function (for composite components) but got: undefined. Prawdopodobnie zapomniałeś wyeksportować komponent z pliku, w którym został zdefiniowany.

Nie mogłem zrozumieć błędu, ponieważ nie wymienia żadnej metody ani nazwy pliku. Byłem w stanie rozwiązać dopiero po spojrzeniu na to Ostrzeżenie, wspomniane powyżej.

Mam następujący wiersz na indeks.js.

<ConnectedRouter history={history}>

Kiedy wyszukałem powyższy błąd za pomocą słowa kluczowego "ConnectedRouter" znalazłem rozwiązanie na stronie GitHub.

Błąd polega na tym, że podczas instalacji pakietu react-router-redux domyślnie instalujemy ten. https://github.com/reactjs/react-router-redux ale nie prawdziwa biblioteka.

Aby rozwiązać ten błąd, zainstaluj odpowiedni pakiet, określając zakres npm za pomocą @

npm install react-router-redux@next

Nie musisz usuwać nieprawidłowo zainstalowanego paczka. Zostanie automatycznie nadpisany.

PS: nawet Ostrzeżenie pomaga. Nie zaniedbuj Ostrzeżenia po prostu patrząc na błąd sam.

Https://github.com/rackt/react-router/blob/e7c6f3d848e55dda11595447928e843d39bed0eb/examples/query-params/app.js#L4 Router jest również jedną z właściwości react-router. Więc zmień swoje moduły wymagają kodu w ten sposób:

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

Jeśli chcesz użyć składni ES6 link use (import), Użyj babel jako helper.

BTW, aby Twój kod działał, możemy dodać {this.props.children} w App, jak

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

  )
}

W moim przypadku, jeden z wyeksportowanych modułów potomnych nie zwracał odpowiedniego komponentu reactowego.

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

Zamiast

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

Pokazany błąd dotyczył rodzica, więc nie mógł się domyślić.

W moim przypadku było to spowodowane błędnymi symbolami komentarza. To jest złe:

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

To jest poprawne:

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

Zwróć uwagę na nawiasy klamrowe

Mam ten sam błąd : NAPRAW BŁĄD !!!!

Używam 'react-router-redux' v4 ale ona jest zła.. Po zainstalowaniu npm react-router-redux@next Jestem na "react-router-redux": "^5.0.0-alpha.9",

AND IT ' S WORK

Miałem ten sam problem i zdałem sobie sprawę, że dostarczam Undefined komponent Reactowy w znacznikach JSX. Rzecz w tym, że komponent reactowy do renderowania został obliczony dynamicznie i ostatecznie stał się niezdefiniowany!

Podany błąd:

Naruszenie niezmienne: Typ elementu jest nieprawidłowy: oczekiwano ciągu znaków (Dla komponentów wbudowanych) lub klasy/funkcji (Dla komponentów złożonych), ale otrzymano: undefined. Prawdopodobnie zapomniałeś wyeksportować komponent z pliku jest zdefiniowana w. Sprawdź metodę renderowania C.,

Przykład wywołujący ten błąd:

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>
  }
  
  // ...
}

Problem polegał na tym, że dostarczono nieprawidłowy "uiType" i dlatego wynik był niezdefiniowany:

templates['InvalidString']

Otrzymałem to robiąc import App from './app/'; oczekując, że zaimportuje ./app/index.js, ale zamiast tego zaimportował ./app.json.

Jako szybki dodatek do tego. Miałem ten sam problem i podczas gdy Webpack kompilował moje testy i aplikacja działała dobrze. Kiedy importowałem mój komponent do pliku testowego, używałem nieprawidłowego przypadku na jednym z importów i powodowało to ten sam błąd.

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

Powinno być

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

zauważ, że nazwa importu myComponent zależy od nazwy eksportu wewnątrz pliku MyComponent.

Miał podobny problem z najnowszymi wersjami 0.50 i nowszymi.

Dla mnie była to różnica między:

import App from './app'

I

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

(ten ostatni naprawił problem). Zajęło mi godziny, aby złapać ten dziwny, trudny do zauważenia niuans : (

Biorąc pod uwagę twój błąd:

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

Masz 2 opcje:

1. Twój plik eksportu może mieć słowo default Jak w export default class ____.... Wtedy twój import będzie musiał unikać używania {} wokół niego. Jak w import ____ from ____

2. Unikaj używania domyślnego słowa. Następnie twój eksport wygląda jak export class ____... Następnie twój import musi użyć {}. Jak import {____} from ____

Inne możliwe rozwiązanie, które zadziałało dla mnie:

Obecnie {[0] } jest w wersji beta, a npm zwraca 4.x, ale nie 5.x. ale @types/react-router-redux zwróciło 5.X. więc użyto niezdefiniowanych zmiennych.

Zmuszanie NPM / Yarn do użycia 5.x rozwiązał to za mnie.

W moim przypadku import odbywał się pośrednio z powodu biblioteki.

Udało mi się to naprawić zmieniając

export class Foo

Do

export default class Foo.

Wpadłem na ten błąd, gdy miałemjsx i .plik scss w tym samym katalogu o tej samej nazwie głównej.

Więc, na przykład, jeśli masz Component.jsx i Component.scss w tym samym folderze i próbujesz to zrobić:

import Component from ./Component

Webpack najwyraźniej się myli i, przynajmniej w moim przypadku, próbuje zaimportować plik scss, kiedy naprawdę chcę .plik jsx.

A w moim przypadku brakowało mi średnika przy imporcie-deklecji w jednym z moich modułów podrzędnych.

Naprawiono to zmieniając to:

import Splash from './Splash'

Do tego:

import Splash from './Splash';

W moim przypadku używałem domyślnego eksportu, ale nie eksportowałem function lub React.Component, a tylko element JSX, tzn.

Błąd:

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

Działa:

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

Oprócz import/export omówione zagadnienia. Znalazłem użycie React.cloneElement(), Aby dodać props do elementu potomnego, a następnie renderowanie go dało mi ten sam błąd.

Musiałem zmienić:

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

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

Do:

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

Zobacz React.cloneElement() docs aby uzyskać więcej informacji.

Dostałem ten błąd w routingu Reacta, problem polegał na tym, że używałem

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

Ale to było złe trasa wymaga komponentu jako klasy / funkcji więc zmieniłem go na

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

Dla mnie było to, że moje styled-components zostały zdefiniowane po mojej definicji funkcjonalnego komponentu. To działo się tylko w inscenizacji, a nie lokalnie dla mnie. Po przeniesieniu moich styled-components powyżej mojej definicji komponentu błąd zniknął.

Oznacza to, że niektóre importowane komponenty są błędnie zadeklarowane lub nieistniejące

Miałem podobny problem, zrobiłem

import { Image } from './Shared'

Ale kiedy zajrzałem do udostępnionego pliku, nie miałem komponentu 'Image', a' ItemImage '

import { ItemImage } from './Shared';

Dzieje się tak, gdy kopiujesz kod z innych projektów;)

Miałem problem z React.Fragment, ponieważ wersja mojego Reacta była < 16.2, więc się go pozbyłem.

Problemem może być również alias używany do domyślnego eksportu.

Zmień

import { Button as ButtonTest } from "../theme/components/Button";

Do

import { default as ButtonTest } from "../theme/components/Button";

@ Balasubramani m Chciałem dodać jeszcze jedną, aby pomóc ludziom. To jest problem, gdy sklejasz zbyt wiele rzeczy razem i jesteś kawalerzystą z wersjami. Zaktualizowałem wersję material-ui i muszę zmienić

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

Do tego:

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';

Miałem ten sam problem i problem polegał na tym, że niektóre pliki js nie były zawarte w pakiecie tej konkretnej strony. Spróbuj włączyć te pliki i problem może zostać rozwiązany. Zrobiłem to:

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

I to naprawiło problem dla mnie.

To było, gdy używałem Reacta w Dot NEt MVC

Odkryłem inny powód tego błędu. Ma to związek z CSS-in-JS zwracającym wartość null do najwyższego poziomu JSX funkcji return w komponencie Reactowym.

Na przykład:

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>
  );
}

Dostałbym to Ostrzeżenie:

Warning: React.createElement: type jest nieprawidłowy -- oczekiwano ciągu znaków (Dla komponentów wbudowanych) lub klasy / funkcji (Dla komponentów złożonych), ale otrzymano: null.

Po którym następuje ten błąd:

Uncaught Error: Typ elementu jest nieprawidłowy: oczekiwano ciągu znaków (Dla komponentów wbudowanych) lub klasy / funkcji (Dla komponentów złożonych), ale otrzymano: null.

Odkryłem, że to dlatego, że nie było CSS z komponentem CSS-in-JS, który próbowałem wyrenderować. Naprawiłem to, upewniając się, że zwrócono CSS, a nie wartość null.

Na przykład:

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>
  );
}

Dostaję prawie ten sam błąd:

Uncaught (w promise) Error: Element type is invalid: oczekiwany łańcuch znaków (Dla komponentów wbudowanych) lub klasa/Funkcja (Dla komponentów złożonych) ale got: object.

Próbowałem zaimportować czysty komponent funkcjonalny z innej biblioteki węzłów, którą opracował mój zespół. Aby to naprawić, musiałem zmienić na import bezwzględny (odwołując się do ścieżki do komponentu wewnątrz node_modules) z

Import FooBarList z "team-ui";

Do

Import FooBarList z 'team-ui / lib/components/foo-bar-list / FooBarList';

W moim przypadku skończyło się na zewnętrznym komponencie importowanym w ten sposób:

import React, { Component } from 'react';

A następnie zadeklarowane jak:

export default class MyOuterComponent extends Component {

Gdzie wewnętrzny komponent zaimportował react bare:

import React from 'react';

I wstawione do niego dla deklaracji:

export default class MyInnerComponent extends ReactComponent {