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

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;

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.

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

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

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() { ...

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

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>

  )
}

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 .

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źć.

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

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

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

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

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.

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 :(

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.

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 ____

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.

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

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

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

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.

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)

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ął.

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

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

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

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

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

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

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 {

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;