React.createElement: тип недопустим - ожидается строка

Ответ 1

В большинстве случаев это происходит потому, что вы не экспортировали/импортировали правильно.

Общая ошибка:

// File: LeComponent.js
export class LeComponent extends React.Component { ... }

// File: App.js
import LeComponent from './LeComponent';

// no "default" export, should be  export default class LeComponent

В некоторых случаях это может быть неправильно, но эта ошибка возникает из-за ошибки импорта/экспорта 60% времени, каждый раз.

Edit

Обычно вы должны получить стек, который указывает приблизительное местоположение, где происходит сбой. Это обычно следует сразу после сообщения, которое у вас есть в исходном вопросе.

Если он не отображается, возможно, стоит изучить причину (это может быть параметр сборки, который вам не хватает). Независимо от того, если он не отображается, единственный курс действий сужается там, где происходит сбой экспорта/импорта.

К сожалению, единственный способ сделать это, без stacktrace, - это вручную удалить каждый модуль/подмодуль, пока вы больше не получите ошибку, а затем создайте резервную копию стека.

Изменить 2

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

Ответ 2

Попробуй это

npm i [email protected]

в вашем App.js

import { BrowserRouter as Router, Route } from 'react-router-dom'

const Home = () => <h1>Home</h1>

const App = () =>(
  <Router>
    <Route path="/" component={Home} />
  </Router>
)

export default App;

Ответ 3

Я тоже получал эту ошибку.

Я использовал:

import BrowserRouter from 'react-router-dom';

Вместо этого Fix сделал это:

import { BrowserRouter } from 'react-router-dom';

Ответ 4

У меня была эта проблема, когда я добавил файл CSS в ту же папку, что и файл компонента.

Мое выражение на импорт было:

import MyComponent from '../MyComponent'

что было хорошо, когда был только один файл, MyComponent.jsx. (Я видел этот формат в примере и попробовал, потом забыл, что сделал)

Когда я добавил MyComponent.scss в ту же папку, импорт не удался. Возможно, вместо этого JavaScript загрузил файл.scss, поэтому ошибки не было.

Мой вывод: всегда указывайте расширение файла, даже если есть только один файл, если вы добавите еще один позже.

Ответ 5

Для будущих гуглеров:

Мое решение этой проблемы состояло в том, чтобы обновить react и react-dom до их последних версий на NPM. По-видимому, я импортировал Компонент, который использовал новый синтаксис фрагмента, и он был сломан в моей старой версии React.

Ответ 6

Что мне недоставало, я использовал

import { Router, Route, browserHistory, IndexRoute } from 'react-router';

вместо этого или правильный ответ должен быть:

import { BrowserRouter as Router, Route } from 'react-router-dom';

Конечно, вам нужно добавить пакет npm response-router-dom:

npm install [email protected] --save

Ответ 7

Вы должны знать о named export и default export. См. Когда я должен использовать фигурные скобки для импорта ES6?

В моем случае я исправил это, изменив

import Provider from 'react-redux'

в

import { Provider } from 'react-redux'

Ответ 8

Эта проблема возникла у меня, когда в моем выражении рендеринга/возврата была неверная ссылка. (указать на несуществующий класс). Также проверьте ваш код заявления на наличие плохих ссылок.

Ответ 9

В моем случае порядок, в котором вы создаете компонент и выполняете рендеринг, имеет значение. Я рендерил компонент перед его созданием. Лучший способ - создать дочерний компонент, а затем родительские компоненты, а затем отобразить родительский компонент. Изменение порядка исправило проблему для меня.

Ответ 10

В моем случае мне просто нужно было перейти от react-router-redux к react-router-redux [email protected]. Я предполагаю, что это должно быть какая-то проблема совместимости.

Ответ 11

Проще говоря, как-то происходит следующее:

render() {
    return (
        <MyComponent /> // MyComponent is undefined.
    );
}

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

render() {
    // MyComponent may be undefined here, for example.
    const MyComponent = this.wizards[this.currentStep];

    return (
        <MyComponent />
    );
}

Ответ 12

Я получаю эту ошибку, и ни один из ответов не был моим случаем, это может помочь кому-то погуглить:

Я неправильно определил Проптип:

ids: PropTypes.array(PropTypes.string)

Так должно быть:

ids: PropTypes.arrayOf(PropTypes.string)

VSCode и ошибка компиляции не дали мне правильную подсказку.

Ответ 13

Если у вас возникает эта ошибка при тестировании компонента, убедитесь, что каждый дочерний компонент корректно отображается при запуске в одиночку, если один из ваших дочерних компонентов зависит от внешних ресурсов для рендеринга, попробуйте смоделировать его с помощью jest или любого другого фиктивного lib:

Exemple:

jest.mock('pathToChildComponent', () => 'mock-child-component')

Ответ 14

В большинстве случаев это указывает на ошибку импорта/экспорта. Но будьте осторожны, чтобы убедиться, что указанный файл в трассировке стека хорошо экспортируется, а также чтобы этот файл правильно импортировал другие компоненты. В моем случае ошибка была такой:

import React from 'react';

// Note the .css at the end, this is the cause of the error!
import SeeminglyUnimportantComponent from './SeeminglyUnimportantComponent.css';

const component = (props) => (            
  <div>
    <SeeminglyUnimportantComponent />
    {/* ... component code here */}
  </div>    
);

export default component;

Ответ 15

В моем случае ошибка произошла при попытке использовать ContextApi. Я по ошибке использовал:

const MyContext = () => createContext()

Но это должно было быть определено как:

const MyContext = createContext()

Я публикую это здесь, чтобы будущие посетители, которые застряли на такой глупой ошибке, могли бы избежать головной боли, поскольку это не вызвано неправильным импортом/экспортом.

Ответ 16

Я думаю, что самая важная вещь, которую нужно осознать при устранении неполадок, связанных с этой ошибкой, заключается в том, что она проявляется при попытке создать экземпляр несуществующего компонента. Этот компонент не должен быть импортирован. В моем случае я передавал компоненты как свойства. Я забыл обновить один из вызовов, чтобы правильно передать компонент после некоторого рефакторинга. К сожалению, поскольку JS не имеет статической типизации, моя ошибка не была обнаружена, и потребовалось некоторое время, чтобы выяснить, что происходит.

Чтобы устранить эту ошибку, проверьте компонент перед его рендерингом, чтобы убедиться, что это тот тип компонента, который вы ожидаете.

Ответ 17

ИЗМЕНИТЬ

Вы усложняете процесс. Просто сделайте следующее:

index.js:

import React from 'react';
import ReactDom from 'react-dom';
import routes from './routes.js';
require('jquery');
import 'bootstrap/dist/css/bootstrap.min.css';
import 'bootstrap/dist/js/bootstrap.min.js';
import './css/main.css';

ReactDom.render(<routes />, document.getElementById('root'));

routes.js:

import React from 'react';
import { AppContainer } from 'react-hot-loader';
import { Router, Route, browserHistory, IndexRoute } from 'react-router';
import store from './store/store.js';
import { Provider } from 'react-redux';
import App from './containers/App.jsx';
import Products from './containers/shop/Products.jsx';
import Basket from './containers/shop/Basket.jsx';

const routes =
    <AppContainer>
        <Provider store={store}>
            <Router history={browserHistory}>
                <Route path="/" component={App}>
                    <IndexRoute component={Products} />
                    <Route path="/basket" component={Basket} />
                </Route>
            </Router>
        </Provider>
    </AppContainer>;

export default routes;

Ответ 18

Я потратил 30 минут, пытаясь решить эту базовую проблему.

Моя проблема была в том, что я импортировал реагирующие нативные элементы

например, import React, { Text, Image, Component } from 'react';

И пытаясь использовать их, что заставило меня получить эту ошибку.

Как только я переключаюсь с <Text> на <p> и <Image> на <img> все работает как положено.