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;

ほとんどの場合、これは不適切なエクスポート/インポートが原因です。

一般的なエラー：

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

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

可能なオプション：

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

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

それが間違っている可能性があるいくつかの方法がありますが、そのエラーは、常にインポート/エクスポートの不一致が60％の確率で発生します。

編集する

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

表示されない場合は、その理由を調査することをお勧めします（不足しているビルド設定である可能性があります）。いずれにせよ、表示されない場合は、エクスポート/インポートが失敗している箇所を絞り込むだけです。

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

編集2

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

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

私が使用していた：

import BrowserRouter from 'react-router-dom';

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

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

これを試して

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;

とに注意する必要がnamed exportありdefault exportます。参照してください。私はES6のインポートのために中括弧を使用すべきですか？

私の場合、から変更することで修正しました

import Provider from 'react-redux'

に

import { Provider } from 'react-redux'

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

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

import MyComponent from '../MyComponent'

MyComponent.jsxというファイルが1つしかない場合は問題ありませんでした。（私は例でこのフォーマットを見て、それを試してみましたが、それをやったのを忘れていました）

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

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

今後のGoogle社員向け：

この問題に対する私のソリューションをアップグレードすることだったreactとreact-domNPM上の彼らの最新のバージョンに。新しいフラグメント構文を使用しているコンポーネントをインポートしていたようですが、古いバージョンのReactでは壊れていました。

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

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

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;

このバグをトラブルシューティングする際に理解する最も重要なことは、存在しないコンポーネントをインスタンス化しようとしたときに明らかになることです。このコンポーネントをインポートする必要はありません。私の場合、コンポーネントをプロパティとして渡していました。何らかのリファクタリングの後でコンポーネントを適切に渡すために、呼び出しの1つを更新するのを忘れていました。残念ながら、JSは静的に型付けされていないため、私のバグは捕捉されず、何が起こっているのかを理解するのにしばらく時間がかかりました。

このバグのトラブルシューティングを行うには、コンポーネントをレンダリングする前に検査し、それが期待するコンポーネントのタイプであることを確認します。

Reactフラグメントがありませんでした：

function Bar({ children }) {

  return (
    <div>
     {children}
    </div>
  );
}

function Foo() {
  return (
    <Bar>
      <Baz/>
      <Qux/>
    </Bar>
  );
}

上記のコードは上記のエラーをスローします。しかし、これはそれを修正します：

<Bar>
  <>
    <Baz/>
    <Qux/>
  </>
</Bar>

コンポーネントの配列

このエラーを取得する一般的な方法は、使用される成分の配列を用いて、位置インデックスは配列からレンダリングするコンポーネントを選択するために使用されます。私はこのようなコードを何度も見ました：

const checkoutSteps = [Address, Shipment, Payment]

export const Checkout = ({step}) => {

  const ToRender = checkoutSteps[step]

  return (
    <ToRender />
  )
}

これは悪いコードである必要はありませんが、間違ったインデックスで（たとえば-1、または3この場合）呼び出した場合、ToRenderコンポーネントはになりundefined、React.createElement: type is invalid...エラーをスローします。

<Checkout step={0} /> // <Address />
<Checkout step={1} /> // <Shipment />
<Checkout step={2} /> // <Payment />
<Checkout step={3} /> // undefined
<Checkout step={-1} /> // undefined

合理的な解決策

マジックナンバーを避け、PropTypesを使用することで、より明示的なアプローチを使用して、デバッグが困難なこのコードから自分と同僚を保護する必要があります。

const checkoutSteps = {
  address: Address,
  shipment Shipment,
  payment: Payment
}

const propTypes = {
  step: PropTypes.oneOf(['address', 'shipment', 'payment']),
}

/* TIP: easier to maintain
const propTypes = {
  step: PropTypes.oneOf(Object.keys(checkoutSteps)),
}
*/

const Checkout = ({step}) => {

  const ToRender = checkoutSteps[step]

  return (
    <ToRender />
  )
}

Checkout.propTypes = propTypes

export default Checkout

そしてあなたのコードは次のようになります：

// OK
<Checkout step="address" /> // <Address />
<Checkout step="shipment" /> // <Shipment />
<Checkout step="payment" /> // <Payment />

// Errors
<Checkout step="wrongstep" /> // explicit error "step must be one of..."
<Checkout step={3} /> // explicit error (same as above)
<Checkout step={myWrongVar} /> // explicit error (same as above)

このアプローチの利点

• コードはより明確です、レンダリングしたいものを明確に見ることができます
• 数字とその隠された意味を覚えておく必要はありません（1アドレス用、2は...）
• エラーは、明示的な、あまりにも
• 同僚の頭痛はありません:)

私にとって欠けていたのは

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

私の場合、index.jsファイルのレンダーによって呼び出された（新しい）要素をインポートおよびエクスポートするのを忘れていました。

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

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

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

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

これは、必ずしも正しくないインポートまたはエクスポートに関連しているとは限りません。

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

    return (
        <MyComponent />
    );
}

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

例：

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

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

const MyContext = () => createContext()

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

const MyContext = createContext()

私がここに投稿しているのは、そのようなばかげた間違いに行き詰まる将来の訪問者が何時間もの頭痛を避けるのに役立つようにするためです。これは誤ったインポート/エクスポートが原因ではありません。

循環依存もこの理由の1つです。[一般に]

これは、デバッグが必要なエラーです。何度も言われているように、不適切なインポート/エクスポートによりこのエラーが発生する可能性がありますが、驚くべきことに、私の小さなバグからこのエラーが発生しましたreact-router-dom authentication setup以下の。

間違った設定：

const PrivateRoute = ({ component: Component, ...rest }) => (
    <Route
        {...rest}
        render={(props) => (token ? <Component {...props} /> : <Redirect to={{ pathname: "/login" }} />)}
    />
);

正しいセットアップ：

const PrivateRoute = ({ component: Component, token, ...rest }) => (
    <Route
        {...rest}
        render={(props) => (token ? <Component {...props} /> : <Redirect to={{ pathname: "/login" }} />)}
    />
);

唯一の違いはtoken、PrivateRoute componentです。ちなみに、トークンはlocalstorageこのconst token = localStorage.getItem("authUser");ように取得されるので、そこにない場合、ユーザーが認証されていないことがわかります。これもそのエラーを引き起こす可能性があります。

とても簡単です。Reactのコーディングを開始したときにこの問題が発生しました。問題はほとんどの場合、インポートが原因です。

import React, { memo } from 'react';

react libにはメモとしてのプロパティがあるため、これを分解することはできますが、このようなものを分解することはできません

import { user } from 'assets/images/icons/Profile.svg';

オブジェクトではないからです。

それが役に立てば幸い！

React.Fragment

私の問題を修正しました

エラーコード：

 return (
            <section className={classes.itemForm}>
             <Card>
             </Card> 
            </section>
      );

修正

 return (
      <React.Fragment>
        <section className={classes.itemForm}>
         <Card>
         </Card> 
        </section>
      </React.Fragment>
  );

これは、インポート/エクスポートに関連する直接的な問題である必要はありません。私の場合、私は親要素内に子要素をレンダリングしており、子要素にはjsx要素/タグが使用されていますが、インポートされていません。インポートして使用したところ、問題が解決しました。したがって、問題は、子要素自体のエクスポートではなく、子要素内にあるjsx要素にありました。

私はこの基本的な問題を解決するために30分間費やしました。

私の問題は、反応ネイティブ要素をインポートしていたことでした

例えば import React, { Text, Image, Component } from 'react';

それらを使用しようとすると、このエラーが発生しました。

私はから切り替えた後<Text>に<p>して<Image>まで<img>、すべて期待通りに働いていました。

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

プロップタイプを間違って定義していました：

ids: PropTypes.array(PropTypes.string)

そのはず：

ids: PropTypes.arrayOf(PropTypes.string)

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

編集

あなたはプロセスを複雑化しています。これを行うだけです：

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;