web-dev-qa-db-ja.com

React.createElement：タイプが無効です-文字列が必要です

React-router（v4.0.0）およびreact-hot-loader（3.0.0-beta.6）をうまく再生しようとしていますが、ブラウザーコンソールで次のエラーを取得しています：

警告：React.createElement：タイプが無効です-文字列（組み込みコンポーネントの場合）またはクラス/関数（複合コンポーネントの場合）が必要ですが、未定義です。定義されているファイルからコンポーネントをエクスポートするのを忘れている可能性があります。

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

const renderApp = (appRoutes) => {
    ReactDom.render(appRoutes, document.getElementById('root'));
};

renderApp( routes() );

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;
reactjsreact-routerreact-hot-loader
61
JoeTidee

ほとんどの場合、これは正しくエクスポート/インポートされていないためです。

一般的なエラー：

// 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％の時間でインポート/エクスポートのミスが原因です。

編集

通常、shouldは、障害が発生した場所のおおよその場所を示すスタックトレースを取得します。これは通常、元の質問にあるメッセージの直後に続きます。

表示されない場合は、理由を調査する価値があるかもしれません（ビルド設定が不足している可能性があります）。とにかく、表示されない場合、唯一の対処方法は絞り込みwhereエクスポート/インポートが失敗していることです。

悲しいことに、スタックトレースなしでそれを行う唯一の方法は、エラーが発生しなくなるまで各モジュール/サブモジュールを手動で削除し、スタックをバックアップすることです。

編集2

コメントを介して、それは確かにインポートの問題であり、具体的には存在しないモジュールをインポートしました

82
Chris

これを試して

npm i react-router-dom@next

あなたの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;
9
Ignatius Andrew

このエラーも発生していました。

私が使用していた：

import BrowserRouter from 'react-router-dom';

代わりにこれを行っていた修正：

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

6
Pedro Gonçalves

コンポーネントファイルと同じフォルダーにcssファイルを追加すると、この問題が発生しました。

私のインポートステートメントは：

import MyComponent from '../MyComponent'

myComponent.jsxというファイルが1つしかない場合は問題ありませんでした。 （この形式を例で見て試してみたが、やったことを忘れてしまった）

MyComponent.scssを同じフォルダーに追加すると、インポートが失敗しました。おそらくJavaScriptが代わりに.scssファイルをロードしたため、エラーはありませんでした。

私の結論：後で別のファイルを追加する場合に備えて、ファイルが1つしかない場合でも、常にファイル拡張子を指定します。

4
Little Brain

将来のGoogleユーザー向け：

この問題に対する私の解決策は、reactとreact-domをNPMの最新バージョンにアップグレードすることでした。どうやら 新しいフラグメント構文 を使用していたコンポーネントをインポートしていましたが、Reactの古いバージョンでは壊れていました。

2
colinbr96

この問題は、render/returnステートメントに誤った参照があったときに発生しました。 （存在しないクラスを指す）。また、不正な参照についてはreturnステートメントコードを確認してください。

1
Cornelius

私が欠けていたのは私が使っていた

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

代わりに、または正しい答えは次のとおりです。

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

もちろん、npmパッケージを追加する必要がありますreact-router-dom：

npm install react-router-dom@next --save
1
Pranav Singh

私はこのエラーを受け取っていましたが、応答は私のケースではありませんでした、それは誰かがグーグルを助けるかもしれません：

私はProptypeを間違って定義していました：

ids: PropTypes.array(PropTypes.string)

そのはず：

ids: PropTypes.arrayOf(PropTypes.string)

VSCodeとコンパイルエラーは、正しいヒントをくれませんでした。

0
llessa

named exportおよびdefault exportに注意する必要があります。 ES6のインポートに中括弧を使用する必要がある場合 を参照してください。

私の場合、私は

import Provider from 'react-redux'

に

import { Provider } from 'react-redux'
0
onmyway133

ほとんどの場合、これはインポート/エクスポートエラーを示しています。ただし、スタックトレース内の参照ファイル自体が適切にエクスポートされるだけでなく、このファイルがその他のコンポーネントを正しくインポートするように注意してください。私の場合、エラーは次のようなものでした：

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;
0
Felipe Suárez

簡単に言えば、どういうわけか次のことが起こっています。

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

必ずしも誤ったインポートまたはエクスポートに関連するとは限りません。

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

    return (
        <MyComponent />
    );
}
0
falsarella

私の場合、コンポーネントを作成してレンダリングする順序が重要でした。コンポーネントを作成する前にレンダリングしていました。最良の方法は、子コンポーネントを作成してから親コンポーネントを作成してから、親コンポーネントをレンダリングすることです。順序を変更すると問題が解決しました。

0
Mahesh Kumar Ronde

私の場合、ContextApiを使用しようとしたときにエラーが発生しました。私は誤って使用しました：

const MyContext = () => createContext()

ただし、次のように定義する必要があります。

const MyContext = createContext()

このような馬鹿げた間違いに巻き込まれる将来の訪問者が頭痛の時間を避けるのに役立つように、ここに投稿しています。これは、誤ったインポート/エクスポートが原因ではないからです。

0
Bhojendra Rauniyar

コンポーネントのテスト時にこのエラーが発生した場合、子コンポーネントの1つが外部リソースに依存してレンダリングする場合は、すべての子コンポーネントが単独で実行されたときに正しくレンダリングされることを確認してください。

例：

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

私の場合、react-router-reduxからreact-router-redux@nextにアップグレードする必要がありました。何らかの互換性の問題であったに違いないと思います。

0
dspacejs