Я получаю эту ошибку:
Неисправленная ошибка: инвариантное нарушение: тип элемента недействителен: ожидается строка (для встроенных компонентов) или класс/функция (для составных компоненты), но получил: объект.
Это мой код:
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 или require (путь).default
var About = require('./components/Home').default
Вы только что модулировали какой-либо из ваших компонентов React? Если да, вы получите эту ошибку, если вы забыли указать module.exports, например:
немодулированный ранее действующий компонент/код:
var YourReactComponent = React.createClass({
render: function() { ...
модульный компонент/код с помощью module.exports:
module.exports = React.createClass({
render: function() { ...
module.exports = YourReactComponent
export default class YourReactComponent extends React.Component {
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>
)
}
Если вы получили эту ошибку, это может быть потому, что вы импортируете ссылку, используя
import { Link } from 'react-router'
вместо этого может быть лучше использовать
import { Link } from 'react-router-dom' ^--------------^
Я считаю, что это требование для версии 4 реактивного маршрутизатора
Не удивляйтесь списку ответов на один вопрос. Есть различные причины для этой проблемы;
Для моего случая предупреждение было
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>;
Показанная ошибка была для родителя, поэтому не могла понять.
У меня такая же ошибка: ОШИБКА ИСПРАВЛЕНИЯ !!!!
Я использую 'response-router-redux' v4, но она плохая.. После npm установите response-router-redux @next Я нахожусь на "Reaction-router-redux": "^ 5.0.0-alpha.9",
И ЭТО РАБОТАЕТ
В моем случае это было вызвано неправильными символами комментария. Это неверно:
<Tag>
/*{ oldComponent }*/
{ newComponent }
</Tag>
Это правильно:
<Tag>
{/*{ oldComponent }*/}
{ newComponent }
</Tag>
Обратите внимание на фигурные скобки
Подобные проблемы возникали с последними версиями React Native 0.50 и выше.
Для меня это была разница между:
import App from './app'
а также
import App from './app/index.js'
(последний исправил проблему). Мне понадобились часы, чтобы уловить этот странный, трудно заметный нюанс :(
Я получил это, выполнив import App from './app/';
, ожидая, что он импортирует ./app/index.js
, но вместо этого импортирует ./app.json
.
У меня была такая же проблема и я понял, что предоставляю компонент 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']
const MyComponent = () => <div>my component</div>;
просто чтобы посмотреть, нормально ли работает импорт.
Просто как быстрое дополнение к этому. У меня была такая же проблема, и в то время как Webpack собирал мои тесты, и приложение работало нормально. Когда я импортировал свой компонент в тестовый файл, я использовал неверный случай для одного из импорта и вызывал ту же ошибку.
import myComponent from '../../src/components/myComponent'
Должно быть
import myComponent from '../../src/components/myComponent'
Обратите внимание, что имя импорта myComponent
зависит от имени экспорта внутри файла myComponent
.
Еще одно возможное решение, которое сработало для меня:
В настоящее время react-router-redux
находится в бета-версии, а npm возвращает 4.x, но не 5.x. Но @types/react-router-redux
вернул 5.x. Таким образом, использовались переменные undefined.
Принуждение NPM/Пряжа к использованию 5.x решило это для меня.
В моем случае я использовал экспорт по умолчанию, но не экспортировал function
или React.Component
, а просто элемент JSX
, т.е.
Ошибка:
export default (<div>Hello World!</div>)
Работает:
export default () => (<div>Hello World!</div>)
И в моем случае я просто пропустил точку с запятой при импортировании-декларации в одном из моих субмодулей.
Исправлено, изменив это:
import Splash from './Splash'
к этому:
import Splash from './Splash';
В моем случае импорт происходил неявно из-за библиотеки.
Мне удалось исправить это, изменив
export class Foo
к
export default class Foo
.
Я столкнулся с этой ошибкой, когда у меня были файлы .jsx и .scss в том же каталоге с тем же корневым именем.
Итак, например, если у вас есть Component.jsx
и Component.scss
в той же папке, и вы пытаетесь сделать это:
import Component from ./Component
Webpack, по-видимому, запутался и, по крайней мере, в моем случае, пытается импортировать файл scss, когда мне действительно нужен файл .jsx.
Я смог исправить это, переименовав файл .scss и избегая двусмысленности. Я мог бы также явно импортировать Component.jsx
import Rating from 'src/components/Rating';
против
import Rating from 'src/components/Rating.js';
вторая работала для меня.
'Uncaught Error: Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function but got: object'
Ваш файл экспорта может иметь слово default
как в export default class ____....
Тогда при импорте необходимо избегать использования {}
. Как в import ____ from ____
Избегайте использования слова по умолчанию. Тогда ваш экспорт выглядит как export class ____...
Тогда ваш импорт должен использовать {}
. Как import {____} from ____
Я получил эту ошибку при обновлении всех библиотек до последней версии
в более старой версии следующие импорты
import { TabViewAnimated, TabViewPagerPan } from 'react-native-tab-view';
но в новой версии они заменены следующими
import { TabView, PagerPan } from "react-native-tab-view";
Поэтому убедитесь, что все ваши импорта доступны с помощью контрольного клика
В моем случае мне потребовалось много времени, чтобы найти и проверить возможные пути, но это было исправлено только так: удалите "{", "}" при импорте пользовательского компонента:
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;
В моем случае это был внешний компонент, импортированный так:
import React, { Component } from 'react';
а затем объявлено как:
export default class MyOuterComponent extends Component {
где внутренний компонент импортировал пустой React:
import React from 'react';
и расставил точки для объявления:
export default class MyInnerComponent extends ReactComponent {
Я получаю почти ту же ошибку:
Uncaught (в обещании) Ошибка: недопустимый тип элемента: ожидается строка (для встроенных компонентов) или класс/функция (для составных компонентов), но есть: объект.
Я пытался импортировать чистый функциональный компонент из другой библиотеки узлов, разработанной моей командой. Чтобы это исправить, мне пришлось изменить абсолютный импорт (ссылаясь на путь к компоненту внутри node_modules
) из
импортировать FooBarList из 'team-ui';
в
импортировать FooBarList из 'team-ui/lib/components/foo-bar-list/FooBarList';
Я обнаружил другую причину этой ошибки. Это связано с тем, что 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>
);
}
У меня была та же проблема, и проблема была в том, что некоторые js файлы не были включены в пакет этой конкретной страницы. Попробуйте включить эти файлы, и проблема может быть решена. Я сделал это:
.Include("~/js/" + jsFolder + "/yourjsfile")
и это исправило проблему для меня.
Это было в то время как я использовал React в Dot NEt MVC
@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';
Это означает, что некоторые из ваших импортированных Компонентов ошибочно объявлены или не существуют
У меня была похожая проблема, я сделал
import { Image } from './Shared'
но когда я посмотрел в общий файл, у меня не было компонента "изображение", а компонент "ItemImage"
import { ItemImage } from './Shared';
Это происходит, когда вы копируете код из других проектов;)
Помимо вопросов 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()
документы для получения дополнительной информации.
Для меня было определено, что мой styled-components был определен после определения моего функционального компонента. Это происходило только в постановке, а не на местном уровне. Как только я переместил свои стилизованные компоненты выше моего определения компонента, ошибка исчезла.