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

443

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

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

Это мой код:

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;
  • 6
    Пожалуйста, посмотрите на stackoverflow.com/questions/36795819/…
  • 0
    Возможный дубликат Когда я должен использовать фигурные скобки для импорта ES6?
Показать ещё 2 комментария
Теги:
react-router

30 ответов

709
Лучший ответ

В моем случае (с использованием Webpack) это была разница между:

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

против

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

Второй работает, а первый вызвал ошибку.

  • 73
    Гуглер из будущего здесь, спасибо, это была моя проблема! Это имеет смысл в ретроспективе, так как первый - это деструктуризация экспорта, но если вы использовали default, то он просто пытается деструктурировать функцию / класс.
  • 24
    Обратное сработало для меня, но эй, что подойдет: D
Показать ещё 10 комментариев
145

вам нужно экспортировать default или require (путь).default

var About = require('./components/Home').default
  • 2
    У меня была эта проблема с 'response-native-navbar'. Я назвал default по требованию, и это исправило мою проблему. Благодарю.
  • 3
    Хм, добавление .default в моем случае решает проблему. Тем не менее, я на самом деле экспортирую по умолчанию Home расширяет Компонент на этот класс, поэтому я ожидал, что он будет работать без «.default»
Показать ещё 4 комментария
50

Вы только что модулировали какой-либо из ваших компонентов React? Если да, вы получите эту ошибку, если вы забыли указать module.exports, например:

немодулированный ранее действующий компонент/код:

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

модульный компонент/код с помощью module.exports:

module.exports = React.createClass({
    render: function() { ...
  • 1
    Было бы то же самое, чтобы создать класс, а затем экспортировать? Как ваш первый фрагмент, а затем module.exports = YourReactComponent
  • 2
    Мне удалось упростить это: export default class YourReactComponent extends React.Component {
Показать ещё 2 комментария
16

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 для использования ссылки (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>

  )
}
  • 0
    Извините за то, что не проверили внимательно прошлой ночью, в вашем домашнем компоненте нет проблем. Можете ли вы попробовать то, что я только что отредактировал?
15

Если вы получили эту ошибку, это может быть потому, что вы импортируете ссылку, используя

import { Link } from 'react-router'

вместо этого может быть лучше использовать

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

Я считаю, что это требование для версии 4 реактивного маршрутизатора

12

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

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

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: даже предупреждение помогает вам. Не пренебрегайте предупреждением, просто глядя на ошибку в одиночку.

9

В моем случае один из экспортированных дочерних модулей не возвращал правильный компонент реакции.

const Component = <div> Content </div>; вместо const Component = () => <div>Content</div>;

Показанная ошибка была для родителя, поэтому не могла понять.

7

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

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

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

7

В моем случае это было вызвано неправильными символами комментария. Это неверно:

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

Это правильно:

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

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

6

Подобные проблемы возникали с последними версиями React Native 0.50 и выше.

Для меня это была разница между:

import App from './app'

а также

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

(последний исправил проблему). Мне понадобились часы, чтобы уловить этот странный, трудно заметный нюанс :(

5

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

4

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

Указанная ошибка:

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

templates['InvalidString']
  • 0
    Кажется, у меня схожая ошибка с response-fine-uploader, но я ничего не могу понять (пока). У него есть компонент Gallery, который я импортирую, и он тоже идет к своему методу рендеринга, но в этом возникает ошибка рендеринга, я не уверен, является ли это проблемой библиотеки или моей проблемой, так как я совершенно новый, чтобы реагировать.
  • 0
    Была похожая ошибка, где была ошибка в сложном компоненте. Простой метод отладки - временно упростить компонент, например, const MyComponent = () => <div>my component</div>; просто чтобы посмотреть, нормально ли работает импорт.
4

Просто как быстрое дополнение к этому. У меня была такая же проблема, и в то время как Webpack собирал мои тесты, и приложение работало нормально. Когда я импортировал свой компонент в тестовый файл, я использовал неверный случай для одного из импорта и вызывал ту же ошибку.

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

Должно быть

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

Обратите внимание, что имя импорта myComponent зависит от имени экспорта внутри файла myComponent.

3

Еще одно возможное решение, которое сработало для меня:

В настоящее время react-router-redux находится в бета-версии, а npm возвращает 4.x, но не 5.x. Но @types/react-router-redux вернул 5.x. Таким образом, использовались переменные undefined.

Принуждение NPM/Пряжа к использованию 5.x решило это для меня.

2

В моем случае я использовал экспорт по умолчанию, но не экспортировал function или React.Component, а просто элемент JSX, т.е.

Ошибка:

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

Работает:

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

И в моем случае я просто пропустил точку с запятой при импортировании-декларации в одном из моих субмодулей.

Исправлено, изменив это:

import Splash from './Splash'

к этому:

import Splash from './Splash';
  • 1
    О, мой бог. Чувак, ты спас мне жизнь. Я действительно не понимаю, почему строитель не сообщает об этом тебе.
2

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

Мне удалось исправить это, изменив

export class Foo

к

export default class Foo.

1

Я столкнулся с этой ошибкой, когда у меня были файлы .jsx и .scss в том же каталоге с тем же корневым именем.

Итак, например, если у вас есть Component.jsx и Component.scss в той же папке, и вы пытаетесь сделать это:

import Component from ./Component

Webpack, по-видимому, запутался и, по крайней мере, в моем случае, пытается импортировать файл scss, когда мне действительно нужен файл .jsx.

Я смог исправить это, переименовав файл .scss и избегая двусмысленности. Я мог бы также явно импортировать Component.jsx

1

import Rating from 'src/components/Rating';

против

import Rating from 'src/components/Rating.js';

вторая работала для меня.

0

Учитывая вашу ошибку:

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

0

Я получил эту ошибку при обновлении всех библиотек до последней версии

в более старой версии следующие импорты

import { TabViewAnimated, TabViewPagerPan } from 'react-native-tab-view';

но в новой версии они заменены следующими

import { TabView, PagerPan } from "react-native-tab-view";

Поэтому убедитесь, что все ваши импорта доступны с помощью контрольного клика

0

В моем случае мне потребовалось много времени, чтобы найти и проверить возможные пути, но это было исправлено только так: удалите "{", "}" при импорте пользовательского компонента:

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

В моем случае это был внешний компонент, импортированный так:

import React, { Component } from 'react';

а затем объявлено как:

export default class MyOuterComponent extends Component {

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

import React from 'react';

и расставил точки для объявления:

export default class MyInnerComponent extends ReactComponent {

0

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

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

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

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

в

импортировать FooBarList из 'team-ui/lib/components/foo-bar-list/FooBarList';

0

Я обнаружил другую причину этой ошибки. Это связано с тем, что 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>
  );
}
0

У меня была та же проблема, и проблема была в том, что некоторые js файлы не были включены в пакет этой конкретной страницы. Попробуйте включить эти файлы, и проблема может быть решена. Я сделал это:

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

и это исправило проблему для меня.

Это было в то время как я использовал React в Dot NEt MVC

0

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

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

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

import { Image } from './Shared'

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

import { ItemImage } from './Shared';

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

0

Помимо вопросов 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() документы для получения дополнительной информации.

0

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

Ещё вопросы

Сообщество Overcoder
Наверх
Меню