Неприхована помилка: Інваріантне порушення: Тип елемента недійсний: очікуваний рядок (для вбудованих компонентів) або клас / функція, але отримано: object

Я отримую цю помилку:

Неприхована помилка: Інваріантне порушення: Тип елемента недійсний: очікуваний рядок (для вбудованих компонентів) або клас / функція (для складених компонентів), але отримано: object.

Це мій код:

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)

Мій Home.jsxфайл:

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;

У моєму випадку ( за допомогою Webpack ) різниця між:

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

проти

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

Другий працює, коли перший викликає помилку. Або навпаки.

вам потрібно експортувати за замовчуванням або вимагати (шлях) .default

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

Ви щойно модулювали будь-який із своїх компонентів React? Якщо так, ви отримаєте цю помилку, якщо забули вказати module.exports , наприклад:

немодульований раніше дійсний компонент / код:

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

модульований компонент / код з module.exports :

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

Якщо ви отримаєте цю помилку, це може бути тому, що ви імпортуєте посилання за допомогою

import { Link } from 'react-router'

натомість, можливо, буде краще використовувати

import {Link} з " react-router-dom "
                      ^ -------------- ^

Я вважаю, що це вимога до маршрутизатора реагування версії 4

https://github.com/rackt/react-router/blob/e7c6f3d848e55dda11595447928e843d39bed0eb/examples/query-params/app.js#L4 Router - також одна з властивостей react-router. Тому для зміни модулів потрібен такий код:

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

Якщо ви хочете використовувати синтаксис ES6 the link use ( import), використовуйте babel як помічник.

До речі, щоб ваш код працював, ми можемо додати {this.props.children}в App, як

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

  )
}

Не дивуйтеся списку відповідей на одне запитання. Існують різні причини цього питання;

Для мого випадку попередження було

Увага.js: 33 Попередження: React.createElement: тип недійсний - очікуваний рядок (для вбудованих компонентів) або клас / функція (для складених компонентів), але отримано: невизначено. Ви, ймовірно, забули експортувати свій компонент з файлу, визначеного в ньому. Перевірте свій код на index.js: 13.

Слідує помилка

invariant.js: 42 Uncaught Помилка: Тип елемента недійсний: очікуваний рядок (для вбудованих компонентів) або клас / функція (для складених компонентів), але отримано: undefined. Ви, ймовірно, забули експортувати свій компонент з файлу, визначеного в ньому.

Я не міг зрозуміти помилку, оскільки в ній не згадується жоден метод чи ім'я файлу. Мені вдалося вирішити лише переглянувши це попередження, згадане вище.

У мене є інший рядок у index.js.

<ConnectedRouter history={history}>

Коли я переглянув вищезгадану помилку з ключовим словом "ConnectedRouter", я знайшов рішення на сторінці GitHub.

Помилка полягає в тому, що, коли ми встановлюємо react-router-reduxпакет, за замовчуванням ми встановлюємо цей. https://github.com/reactjs/react-router-redux, але не фактична бібліотека.

Щоб вирішити цю помилку, встановіть відповідний пакет, вказавши область npm за допомогою @

npm install react-router-redux@next

Вам не потрібно видаляти неправильно встановлений пакет. Він буде автоматично перезаписаний.

Дякую.

PS: Навіть попередження вам допомагає. Не нехтуйте попередженням, лише дивлячись на помилку .

У моєму випадку один із експортованих дочірніх модулів не повертав належного компонента реакції.

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

замість

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

Показана помилка була для батьків, тому не вдалося з'ясувати.

У моєму випадку це було спричинено неправильними символами коментарів. Це неправильно:

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

Це вірно:

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

Зауважте фігурні дужки

У мене така ж помилка: ПОМИЛКА ПОМИЛКИ !!!!

Я використовую 'react-router-redux' v4, але вона погана. Після npm встановіть reakct -router-redux @ далі я переходжу на "react-router-redux": "^ 5.0.0-alpha.9",

І РОБОТА

Це я отримав, import App from './app/';очікуючи імпорту ./app/index.js, але замість цього імпортував ./app.json.

У мене виникла та сама проблема і зрозумів, що я надаю компонент Undefined React в розмітці JSX. Річ у тім, що компонент реагування для візуалізації динамічно розраховувався, і він виявився невизначеним!

Заявлена ​​помилка:

Інваріантне порушення: тип елемента недійсний: очікуваний рядок (для вбудованих компонентів) або клас / функція (для складених компонентів), але отримано: невизначено. Ви, ймовірно, забули експортувати свій компонент з файлу, визначеного в ньому. Перевірте метод візуалізації C.,

Приклад, що викликає цю помилку:

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

Проблема полягала в тому, що надано недійсний "uiType", і це призводить до невизначеного результату:

templates['InvalidString']

Так само як швидке доповнення до цього. У мене була така ж проблема, і в той час, як Webpack складав мої тести, і програма працювала нормально. Коли я імпортував свій компонент у тестовий файл, я використовував неправильний регістр одного із імпортів, і це викликало ту саму помилку.

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

Повинно було

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

Зауважте, що імпорт імпорту myComponentзалежить від імені експорту всередині MyComponentфайлу.

Мав подібну проблему з останніми версіями React Native 0,50 і новіших версій.

Для мене це була різниця між:

import App from './app'

і

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

(останні виправили це питання). Мені потрібні години, щоб зловити цей дивний, важко помітний нюанс :(

Ще одне можливе рішення, яке працювало для мене:

Наразі react-router-reduxзнаходиться в бета-версії та npm повертає 4.x, але не 5.x. Але @types/react-router-reduxповернувся 5.x. Так були використані невизначені змінні.

Примушуючи NPM / Пряжу використовувати 5.x вирішив це для мене.

З огляду на вашу помилку:

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

У вас є 2 варіанти:

1. У вашому експортному файлі може бути слово defaultяк у розділі export default class ____.... Тоді імпорт потрібно уникати {}навколо нього. Як і вimport ____ from ____

2. Уникайте використання слова за замовчуванням. Тоді ваш експорт виглядає як export class ____... тоді ваш імпорт повинен використовувати {}. Подібно доimport {____} from ____

У моєму випадку імпорт відбувався неявно завдяки бібліотеці.

Мені вдалося виправити це, змінивши

export class Foo

до

export default class Foo.

Я зіткнувся з цією помилкою, коли у мене був файл .jsx та .scss в одному каталозі з тим же ім'ям кореня.

Так, наприклад, якщо у вас є Component.jsxі Component.scssв одній папці, і ви намагаєтесь це зробити:

import Component from ./Component

Вебпак, мабуть, плутається, і, принаймні, в моєму випадку, намагається імпортувати файл scss, коли мені дуже потрібен файл .jsx.

Я зміг це виправити, перейменувавши файл .scss і уникаючи неоднозначності. Я міг також явно імпортувати Component.jsx

І в моєму випадку я просто пропустив крапку з комою при імпорті-декларації в одному з моїх під модулів.

Виправлено це, змінивши це:

import Splash from './Splash'

до цього:

import Splash from './Splash';

У моєму випадку я використовував експорт за замовчуванням, але не експортував а functionчи React.Component, а просто JSXелемент, тобто

Помилка:

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

Працює:

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

Окрім import/ exportзгаданих питань. Я виявив, що використовую React.cloneElement()для додавання propsдо дочірнього елемента, а потім рендеринг, він дав мені ту саму помилку.

Мені довелося змінити:

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

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

до:

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

Докладнішу інформацію див. У React.cloneElement() документах .

Я отримав цю помилку в маршрутизації реакції, проблема в тому, що я використовую

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

але неправильний маршрут вимагає компонента як класу / функції, тому я змінив його на

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

і це спрацювало. (Просто уникайте дужок навколо компонента)

Для мене було те, що мої стильові компоненти були визначені після визначення мого функціонального компонента. Це відбувалося лише в постановці, а не для мене локально. Як тільки я перемістив свої стильові компоненти вище визначення мого компонента, помилка пішла.

Це означає, що деякі з імпортованих Вами компонентів неправильно оголошені або відсутні

У мене було подібне питання, я

import { Image } from './Shared'

але коли я заглянув у загальний файл, у мене не було компонента "Зображення", а компонента "ItemImage"

import { ItemImage } from './Shared';

Це відбувається, коли ви копіюєте код з інших проектів;)

У мене виникло питання React.Fragment, оскільки версія моєї реакції була < 16.2, тому я її позбувся.

@Balasubramani M врятував мене тут. Хотіли додати ще одного, щоб допомогти людям. Ця проблема полягає в тому, що ви склеюєте занадто багато речей і ставитесь до версій з версією. Я оновив версію material-ui та потребую змін

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

до цього:

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

У мене був той самий випуск, і проблема полягала в тому, що деякі файли js не були включені до групи цієї конкретної сторінки. Спробуйте включити ці файли і проблеми можуть бути усунені. Я зробив це:

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

і це вирішило проблему для мене.

Це було тоді, коли я використовував React у Dot NEt MVC

Я виявив ще одну причину цієї помилки. Це пов'язано з тим, що CSS-в-JS повертає нульове значення до JSX верхнього рівня функції повернення в компоненті React.

Наприклад:

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

Я отримаю це попередження:

Попередження: React.createElement: тип недійсний - очікуваний рядок (для вбудованих компонентів) або клас / функція (для складених компонентів), але отримано: null.

Після цього помилка:

Помилка Uncaught: Тип елемента недійсний: очікуваний рядок (для вбудованих компонентів) або клас / функція (для складених компонентів), але отримано: null.

Я виявив, що я не намагався відобразити CSS з компонентом CSS в JS. Я виправив це, переконавшись, що CSS повертається, а не нульове значення.

Наприклад:

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

Я отримую майже таку ж помилку:

Uncaught (з обіцянкою) Помилка: тип елемента недійсний: очікуваний рядок (для вбудованих компонентів) або клас / функція (для складених компонентів), але отримано: object.

Я намагався імпортувати чистий функціональний компонент з іншої бібліотеки вузлів, яку розробила моя команда. Щоб виправити це, мені довелося перейти на абсолютний імпорт (посилання на шлях до компонента всередині node_modules) з

імпорт FooBarList з 'team-ui';

до

імпортувати FooBarList з 'team-ui / lib / компоненти / foo-bar-list / FooBarList';

У моєму випадку це зовнішній компонент, імпортований так:

import React, { Component } from 'react';

а потім оголошено як:

export default class MyOuterComponent extends Component {

де внутрішній компонент імпортував голий React:

import React from 'react';

і вписано в неї для декларації:

export default class MyInnerComponent extends ReactComponent {

У моєму випадку знадобилося чимало часу, щоб шукати і перевіряти шляхи, але виправлені лише таким чином: видалити "{", "}" під час імпорту користувацького компонента:

import OrderDetail from './orderDetail';

Мій неправильний шлях:

import { OrderDetail } from './orderDetail';

Тому що у файлі orderDetail.js я експортував OrderDetail як клас за замовчуванням:

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

export default OrderDetail;