Uncaught Ошибка: Инвариантное Нарушение: Тип элемента недопустим: ожидал строку (для встроенных компонентов) или класса / функции, но получил: объект

Я получаю эту ошибку:

Uncaught Ошибка: Инвариантное Нарушение: Тип элемента недопустим: ожидал строку (для встроенных компонентов) или класс / функцию (для составных компонентов), но получил: объект.

Это мой код:

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} из'act-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, используйте link ( 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>

  )
}

Не удивляйтесь списку ответов на один вопрос. Есть различные причины для этой проблемы;

Для моего случая предупреждение было

warning.js: 33 Предупреждение: React.createElement: тип недопустим - ожидается строка (для встроенных компонентов) или класс / функция (для составных компонентов), но получено: undefined. Вы, вероятно, забыли экспортировать свой компонент из файла, в котором он определен. Проверьте код по адресу 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>

Обратите внимание на фигурные скобки

У меня такая же ошибка: ОШИБКА ИСПРАВЛЕНИЯ !!!!

Я использую 'response-router-redux' v4, но она плохая .. После npm установите response-router-redux @ next, я нахожусь на "Reaction-router-redux": "^ 5.0.0-alpha.9",

И ЭТО РАБОТАЕТ

Я получил это, import App from './app/';ожидая, что он будет импортирован ./app/index.js, но вместо этого он импортирован ./app.json.

У меня возникла та же проблема, и я понял, что предоставляю компонент Undefined React в разметке JSX. Дело в том, что компонент рендеринга для рендеринга был рассчитан динамически, и он оказался неопределенным!

Ошибка указана:

Нарушение инварианта: недопустимый тип элемента: ожидается строка (для встроенных компонентов) или класс / функция (для составных компонентов), но получено: undefined. Вы, вероятно, забыли экспортировать свой компонент из файла, в котором он определен. Проверьте метод визуализации 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.х. Так что были использованы неопределенные переменные.

Заставить NPM / Yarn использовать 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

Webpack явно запутался и, по крайней мере, в моем случае, пытается импортировать файл 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 />

и это сработало. (Просто избегайте скобок вокруг компонента)

Для меня это было то, что мои стилевые компоненты были определены после определения моего функционального компонента. Это происходило только в постановке, а не локально для меня. Как только я переместил свои styled-компоненты выше определения компонентов, ошибка исчезла.

Это означает, что некоторые из ваших импортированных Компонентов ошибочно объявлены или не существуют

У меня была похожая проблема, я сделал

import { Image } from './Shared'

но когда я посмотрел в общий файл, у меня не было компонента «изображение», а компонент «ItemImage»

import { ItemImage } from './Shared';

Это происходит, когда вы копируете код из других проектов;)

У меня была проблема React.Fragment, потому что версия моей реакции была < 16.2, поэтому я от нее избавился.

@Balasubramani M спас меня здесь. Хотел добавить еще одного, чтобы помочь людям. Это проблема, когда вы склеиваете слишком много вещей и не разбираетесь в версиях. Я обновил версию материала-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-in-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 Error: недопустимый тип элемента: ожидается строка (для встроенных компонентов) или класс / функция (для составных компонентов), но получено: null.

Я обнаружил, что это потому, что не было CSS с компонентом CSS-in-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 (в обещании) Ошибка: недопустимый тип элемента: ожидается строка (для встроенных компонентов) или класс / функция (для составных компонентов), но есть: объект.

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

импортировать FooBarList из 'team-ui';

в

импортировать FooBarList из 'team-ui / lib / components / 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;