Nieprzechwycony błąd: Niezmienne naruszenie: Typ elementu jest niepoprawny: oczekiwano ciągu (dla komponentów wbudowanych) lub klasy / funkcji, ale otrzymano: obiekt

529

Otrzymuję ten błąd:

Nieprzechwycony błąd: Niezmienne naruszenie: Typ elementu jest niepoprawny: oczekiwany ciąg (dla komponentów wbudowanych) lub klasa / funkcja (dla komponentów złożonych), ale dostał: obiekt.

To jest mój kod:

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)

Mój Home.jsxplik:

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;
Pankaj Thakur
źródło
7
Proszę spojrzeć na stackoverflow.com/questions/36795819/…
Marcelo Salazar
Ten błąd może wystąpić, jeśli spróbujesz zaimportować nieistniejący komponent . Upewnij się, że nie ma literówki, a komponent rzeczywiście tak nazwał. W przypadku bibliotek upewnij się, że używasz odpowiedniej wersji, ponieważ komponenty mogą mieć różne nazwy w różnych wersjach.
totymedli
Może się to również zdarzyć, gdy zdefiniujesz właściwość, na przykład poprzez zniszczenie ES6, o takiej samej nazwie jak już zaimportowany komponent (i spróbuj przekazać ją innemu komponentowi).
Philip Murphy

Odpowiedzi:

886

W moim przypadku ( przy użyciu pakietu Webpack ) była to różnica między:

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

vs

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

Drugi działa, podczas gdy pierwszy powoduje błąd. Lub odwrotnie.

JohnL
źródło
81
Googler z przyszłości tutaj, dzięki, to był mój problem! Z perspektywy czasu ma to sens, ponieważ pierwszą z nich jest restrukturyzacja eksportu, ale jeśli użyłeś opcji domyślnej, to po prostu próbuje ona zniszczyć funkcję / klasę.
ebolyen,
3
Dla przyszłych ludzi moja sprawa była literówką w nazwie elementu, którego używałem. Zmieniłem <TabBarIOS.item>na<TabBarIOS.Item>
Ryan-Neal Mes
6
Olbrzymi. Dlaczego tak jest?
lol
45
Dla każdego, kto nadal zastanawia się, dlaczego to działa - {MyComponent} importuje eksport „MyComponent” z pliku „../components/xyz.js” - drugi importuje domyślny eksport z „../components/xyz.js”.
ShaunYearStrong
Może to być również spowodowane importem do MyComponent. w moim przypadku błąd wspomniał o MyComponent, ale faktycznie instrukcja importowania w nim spowodowała błąd: import {SomeLibraryCompenent} z 'some-library'
ykorach
159

potrzebujesz domyślnego eksportu lub wymagaj (ścieżki) .default

var About = require('./components/Home').default
jackypan1989
źródło
2
Miałem ten problem z „React-native-navbar”. Zadzwoniłem domyślnie na żądanie i to naprawiło mój problem. Dzięki.
Varand Pezeshkian
3
Hmm, dodanie .default w moim przypadku rozwiązuje problem. Jednak tak naprawdę eksportuję domyślnie Home rozszerza komponent w tej klasie, więc oczekiwałbym, że zadziała bez „.default”
Marc
3
czy możesz wyjaśnić przyczynę, jak to się dzieje, gdy dodamy domyślną?
Subham Tripathi
1
działało, ale czy ktoś może wyjaśnić, co robi .default.
Burak Karasoy,
1
@BurakKarasoy Potrzebujesz .default, ponieważ standardowym sposobem budowania modułów Babel jest przekształcanie export defaultinstrukcji exports.default, abyś mógł z nich korzystać .defaultpodczas importowania modułu. Jednym ze sposobów na pozbycie się tego jest użycie eksportu babel-plugin-add-module-export, który przywraca domyślne zachowanie.
Jean-Baptiste Louazel
54

Czy właśnie zmodularyzowałeś któryś ze składników React? Jeśli tak, pojawi się ten błąd, jeśli zapomnisz podać module.exports , na przykład:

niemodularny poprzednio ważny komponent / kod:

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

modułowy komponent / kod z module.exports :

module.exports = React.createClass({
    render: function() { ...
Charlez
źródło
2
Czy tak samo byłoby stworzyć klasę, a następnie wyeksportować? Jak twój pierwszy fragment, a potemmodule.exports = YourReactComponent
Nick Pineda
3
Byłem w stanie uprościć to:export default class YourReactComponent extends React.Component {
cpres
Otrzymuję ten sam błąd. Jestem w stanie renderować w jednym składniku, ale nie mogę renderować w innym.
Mr_Perfect
Nawet wspomniałem, że module.exportsnadal
pojawia się
20

Jeśli pojawi się ten błąd, przyczyną może być importowanie linku

import { Link } from 'react-router'

zamiast tego może być lepiej użyć

Łącze importu {} z ' reagować-router dom '
                      ^ -------------- ^

Wierzę, że jest to wymóg dla routera z reakcją w wersji 4

NSCoder
źródło
Mój przyjaciel importował link reactzamiast react-router-dom. Naprawiono problem. Nigdy wcześniej nie widziałem tego komunikatu o błędzie.
O-9
18

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ą takiego kodu:

  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, użyj link use ( import), użyj babel jako pomocnika.

BTW, aby uczynić swoje prace kodu, możemy dodać {this.props.children}w Appjak

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

  )
}
David Guan
źródło
Przepraszam, że nie testowałem wczoraj zeszłej nocy, nie ma problemu z komponentem Home. Czy możesz spróbować tego, co właśnie edytowałem?
David Guan,
18

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

W moim przypadku było to ostrzeżenie

warning.js: 33 Ostrzeżenie: React.createElement: typ jest niepoprawny - oczekiwany ciąg (dla komponentów wbudowanych) lub klasa / funkcja (dla komponentów złożonych), ale dostał: niezdefiniowany. Prawdopodobnie zapomniałeś wyeksportować swój komponent z pliku, w którym jest zdefiniowany. Sprawdź kod pod adresem index.js: 13.

Następuje błąd

invariant.js: 42 Nieprzechwycony błąd: Niepoprawny typ elementu: oczekiwany ciąg (dla komponentów wbudowanych) lub klasa / funkcja (dla komponentów złożonych), ale otrzymano: niezdefiniowany. Prawdopodobnie zapomniałeś wyeksportować swój komponent z pliku, w którym jest zdefiniowany.

Nie mogłem zrozumieć błędu, ponieważ nie wspomina o żadnej metodzie ani nazwie pliku. Rozwiązałem problem dopiero po obejrzeniu wspomnianego ostrzeżenia.

Mam następujący wiersz w pliku index.js.

<ConnectedRouter history={history}>

Gdy przejrzałem powyższy błąd ze słowem kluczowym „ConnectedRouter” , znalazłem rozwiązanie na stronie GitHub.

Błąd polega na tym, że podczas instalowania react-router-reduxpakietu domyślnie instalujemy ten pakiet. https://github.com/reactjs/react-router-redux, ale nie rzeczywista 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ć źle zainstalowanego pakietu. Zostanie automatycznie nadpisany.

Dziękuję Ci.

PS: Nawet ostrzeżenie pomaga. Nie zaniedbuj ostrzeżenia, patrząc tylko na sam błąd .

Balasubramani M.
źródło
Chciałbym móc głosować to wiele razy.
Cizaphil
15

W moim przypadku jeden z eksportowanych modułów potomnych nie zwracał właściwego komponentu reagowania.

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

zamiast

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

Pokazany błąd dotyczył rodzica, dlatego nie można go rozgryźć.

Katti
źródło
11

W moim przypadku było to spowodowane niewłaściwymi symbolami komentarzy. To jest źle:

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

To jest poprawne:

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

Zwróć uwagę na nawiasy klamrowe

tuanh118
źródło
10

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

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”,

I TO DZIAŁA

Thibault Jp
źródło
8

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

tybro0103
źródło
2
I to jest wyjaśnienie: github.com/facebook/react-native/issues/12539
sfratini
8

Miałem ten sam problem i zdałem sobie sprawę, że udostępniłem komponent Niezdefiniowana Reakcja w znacznikach JSX. Chodzi o to, że komponent reagujący na renderowanie został obliczony dynamicznie i ostatecznie nie został zdefiniowany!

Błąd stwierdził:

Niezmienne naruszenie: Typ elementu jest nieprawidłowy: oczekiwany ciąg (dla komponentów wbudowanych) lub klasa / funkcja (dla komponentów złożonych), ale dostał: niezdefiniowany. Prawdopodobnie zapomniałeś wyeksportować komponent z pliku, w którym jest zdefiniowany. Sprawdź metodę renderowania C.,

Przykład powodują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 podano niepoprawny „typ uiType”, dlatego wynik był niezdefiniowany:

templates['InvalidString']

cSn
źródło
Wydaje mi się, że mam podobny błąd w przypadku programu upload-reagującego-fine-uploader, ale nie mogę nic dowiedzieć (jeszcze). Ma komponent Gallery, który importuję, i idzie też do metody renderowania, ale w tym przypadku pojawia się błąd renderowania, nie jestem pewien, czy to jest problem z biblioteką, czy mój problem, ponieważ mam dość nową reakcję.
Zia Ul Rehman Mughal
Miał podobny błąd, gdy wystąpił błąd w złożonym składniku. Prostą metodą debugowania jest tymczasowe uproszczenie komponentu, np. Po const MyComponent = () => <div>my component</div>;prostu sprawdzenie, czy wtedy import działa normalnie.
metakermit,
Przydałoby się to wykryć, np. Za pomocą reguły kłaczków.
Will Cain,
7

Jest to szybki dodatek do tego. Miałem ten sam problem i podczas gdy Webpack kompilował moje testy, a aplikacja działała poprawnie. Kiedy importowałem mój komponent do pliku testowego, użyłem niepoprawnej wielkości liter w jednym z importów i to spowodowało ten sam błąd.

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

Powinien był być

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

Pamiętaj, że nazwa importu myComponentzależy od nazwy eksportu w MyComponentpliku.

Zaciemnienie 1985
źródło
7

Miał podobny problem z najnowszymi wersjami React Native 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 drugi rozwiązał problem). Zajęło mi godziny, aby złapać ten dziwny, trudny do zauważenia niuans :(

Oleg Dater
źródło
6

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

Obecnie react-router-reduxjest w fazie beta i npm zwraca 4.x, ale nie 5.x. Ale @types/react-router-reduxzwrócone 5.x. Użyto więc niezdefiniowanych zmiennych.

Zmuszenie NPM / przędzy do używania 5.x rozwiązało to dla mnie.

Florian Richter
źródło
6

Biorąc pod uwagę 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. Plik eksportu może zawierać słowo defaultjak w polu. export default class ____.... Następnie import będzie musiał unikać używania {}go w pobliżu. Jak wimport ____ from ____

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

jasonleonhard
źródło
Świetna odpowiedź !!! +1 ... Całkowicie przeoczyłem export default {component name}i zapomniałem go dodać
Si8
@ Si8 Cieszę się, że mogę służyć i dziękuję, że sprawiłeś, że uśmiechnąłem się z samego rana.
jasonleonhard
5

W moim przypadku import odbywał się domyślnie z powodu biblioteki.

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

export class Foo

do

export default class Foo.

zwroty dnia
źródło
5

Wystąpił ten błąd, gdy miałem plik .jsx i .scss w tym samym katalogu o tej samej nazwie katalogu głównego.

Tak więc, na przykład, jeśli masz Component.jsxi Component.scssw tym samym folderze i spróbować 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.

Udało mi się to naprawić, zmieniając nazwę pliku .scss i unikając dwuznaczności. Mógłbym również jawnie zaimportować plik Component.jsx

bergie3000
źródło
1
Panie, ratujesz życie. W moim przypadku był to zasadniczo Component.json (plik danych).
tengen
4

A w moim przypadku po prostu brakowało mi średnika podczas importu-decleracji w jednym z moich podmodułów.

Naprawiono to, zmieniając to:

import Splash from './Splash'

do tego:

import Splash from './Splash';
Rikard Askelöf
źródło
2
O mój Boże. Człowieku, uratowałeś mi życie. Naprawdę nie rozumiem, dlaczego budowniczy nie zgłasza tego tobie.
Milan Vlach
4

W moim przypadku korzystałem z domyślnego eksportu, ale nie eksportowałem functionani React.Component, ale tylkoJSX elementem, czyli

Błąd:

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

Pracuje :

export default () => (<div>Hello World!</div>)
Andru
źródło
2

Oprócz import/ exportwymienionych problemów. Znalazłem za pomocą, React.cloneElement()aby dodaćprops do elementu potomnego, a następnie renderowanie go dało 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() dokumentację, aby uzyskać więcej informacji.

Greg K.
źródło
2

Wystąpił ten błąd w reakcji routingu, problem polegał na tym, że używałem

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

ale to była zła trasa wymaga komponentu jako klasy / funkcji, więc zmieniłem go na

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

i zadziałało. (Po prostu unikaj nawiasów klamrowych wokół komponentu)

Naxxa Consulting
źródło
W inny sposób, moje rozwiązanie było odwrotne od ciebie :), ale dziękuję, że otworzyłeś moje oczy.
Yulio Aleman Jimenez
1

Dla mnie było tak, że moje komponenty w stylu zostały zdefiniowane po definicji komponentu funkcjonalnego. Działo się to tylko w inscenizacji, a nie lokalnie dla mnie. Po przeniesieniu stylizowanych komponentów powyżej definicji komponentu błąd zniknął.

Jadam
źródło
1

Oznacza to, że niektóre z zaimportowanych komponentów są nieprawidłowo zadeklarowane lub nie istnieją

Miałem podobny problem

import { Image } from './Shared'

ale kiedy spojrzałem na udostępniony plik, nie miałem komponentu „Image”, a raczej „ItemImage”

import { ItemImage } from './Shared';

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

webmaster
źródło
1

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

Eugene Ihnatsyeu
źródło
0

@Balasubramani M uratował mnie tutaj. Chciałem dodać jeszcze jeden, aby pomóc ludziom. Jest to problem, gdy sklejasz ze sobą zbyt wiele rzeczy i jesteś kawalerski w wersjach. Zaktualizowałem wersję interfejsu użytkownika i muszę to 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';
Kyle Pennell
źródło
0

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 dołączyć te pliki, a problem może zostać rozwiązany. Ja to zrobiłem:

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

i rozwiązało to problem.

To było, kiedy korzystałem z React w Dot NEt MVC

Jason
źródło
0

Znalazłem inny powód tego błędu. Ma to związek z tym, że CSS-in-JS zwraca wartość zerową do najwyższego poziomu JSX funkcji return w komponencie React.

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

Otrzymałbym to ostrzeżenie:

Ostrzeżenie: React.createElement: typ jest niepoprawny - oczekiwany ciąg (dla komponentów wbudowanych) lub klasa / funkcja (dla komponentów złożonych), ale otrzymał: null.

Następuje ten błąd:

Nieprzechwycony błąd: Niepoprawny typ elementu: oczekiwany ciąg (dla komponentów wbudowanych) lub klasa / funkcja (dla komponentów złożonych), ale otrzymał: 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 zwracany jest CSS, a nie wartość zerowa.

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>
  );
}
kodinaire
źródło
0

Otrzymuję prawie ten sam błąd:

Nieprzechwycony (w obietnicy) Błąd: Niepoprawny typ elementu: oczekiwany ciąg (dla komponentów wbudowanych) lub klasa / funkcja (dla komponentów złożonych), ale dostał: obiekt.

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 absolutny (odwołujący się do ścieżki wewnątrz komponentu node_modules) z

import FooBarList z 'team-ui';

do

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

Patrick
źródło
0

W moim przypadku okazało się, że jest to zewnętrzny komponent importowany w następujący sposób:

import React, { Component } from 'react';

a następnie zadeklarował:

export default class MyOuterComponent extends Component {

gdzie wewnętrzny komponent zaimportował React goły:

import React from 'react';

i wstawiłem do niego do deklaracji:

export default class MyInnerComponent extends ReactComponent {

krayzk
źródło
0

W moim przypadku wyszukiwanie zajęło mi sporo czasu i sprawdziłem, które sposoby, ale naprawiłem tylko w ten sposób: usuń „{”, „}” podczas importowania niestandardowego komponentu:

import OrderDetail from './orderDetail';

Mój zły sposób to:

import { OrderDetail } from './orderDetail';

Ponieważ w pliku orderDetail.js wyeksportowałem OrderDetail jako domyślną klasę:

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

export default OrderDetail;
tiennsloit
źródło