キャッチされないエラー：不変の違反：要素タイプが無効です：文字列（組み込みコンポーネントの場合）またはクラス/関数が必要ですが、オブジェクトが取得されました：オブジェクト

このエラーが発生しています：

キャッチされないエラー：不変の違反：要素タイプが無効です：文字列（組み込みコンポーネントの場合）またはクラス/関数（複合コンポーネントの場合）が必要ですが、オブジェクト：を取得しました。

これは私のコードです：

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

最初のものがエラーを引き起こしている間、2番目のものは機能します。またはその逆。

エクスポートのデフォルトまたはrequire（path）.defaultが必要です

var About = require('./components/Home').default

Reactコンポーネントをモジュール化したばかりですか？はいの場合、module.exportsの指定を忘れると、このエラーが発生します。次に例を示します。

モジュール化されていない以前の有効なコンポーネント/コード：

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

module.exportsでモジュール化されたコンポーネント/コード：

module.exports = React.createClass({
    render: function() { ...

このエラーが発生した場合は、次を使用してリンクをインポートしていることが原因である可能性があります

import { Link } from 'react-router'

代わりに、使用する方が良いかもしれません

' react-router-dom ' からのインポート{リンク}
                      ^ -------------- ^

これは反応ルーターバージョン4の要件だと思います

https://github.com/rackt/react-router/blob/e7c6f3d848e55dda11595447928e843d39bed0eb/examples/query-params/app.js#L4 Routerものプロパティの1つですreact-router。したがって、モジュールを変更するには、次のようなコードが必要です。

  var reactRouter = require('react-router')
  var Router = reactRouter.Router
  var Route = reactRouter.Route
  var Link = reactRouter.Link

ES6構文リンクuse（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>

  )
}

単一の質問に対する回答のリストに驚かないでください。この問題にはさまざまな原因があります。

私の場合、警告は

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

エラーが続きます

invariant.js：42不明なエラー：要素タイプが無効です：文字列（組み込みコンポーネントの場合）またはクラス/関数（複合コンポーネントの場合）が必要ですが、取得できません：未定義。定義されているファイルからコンポーネントをエクスポートするのを忘れた可能性があります。

メソッドやファイル名が記載されていないため、エラーを理解できませんでした。上記のこの警告を見て初めて解決できました。

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：警告でも役立ちます。エラーだけを見て警告を無視しないでください。

私の場合、エクスポートされた子モジュールの1つが適切な反応コンポーネントを返していませんでした。

const Component = <div> Content </div>;

の代わりに

const Component = () => <div>Content</div>;

表示されたエラーは親に関するものなので、理解できませんでした。

私の場合、それは間違ったコメント記号が原因でした。これは間違っています：

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

これは正しいです：

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

中括弧に注意してください

同じエラーがあります： エラー修正!!!!

私は「react-router-redux」 v4 を使用していますが、彼女は悪いです。npmをインストールした後、react-router-redux @ next を実行してい ます。

そしてそれは仕事です

import App from './app/';インポートすることを期待してやった./app/index.jsが、代わりにインポートされた./app.json。

同じ問題があり、JSXマークアップでUndefined Reactコンポーネントを提供していることに気付きました。問題は、レンダリングする反応コンポーネントが動的に計算され、最終的に未定義になることです！

エラーは述べました：

不変の違反：要素タイプが無効です：文字列（組み込みコンポーネントの場合）またはクラス/関数（複合コンポーネントの場合）が必要ですが、取得できません：未定義。コンポーネントが定義されているファイルからコンポーネントをエクスポートするのを忘れている可能性があります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」が提供されたため、結果として未定義が生成されることでした。

templates['InvalidString']

これに簡単に追加できます。私は同じ問題を抱えていて、Webpackがテストをコンパイルしていて、アプリケーションは問題なく実行されていました。コンポーネントをテストファイルにインポートするときに、インポートの1つで誤ったケースを使用していたため、同じエラーが発生していました。

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

になるはずだった

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

インポート名myComponentは、MyComponentファイル内のエクスポートの名前に依存することに注意してください。

React Nativeの最新バージョン0.50以上で同様の問題がありました。

私にとってそれは違いでした：

import App from './app'

そして

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

（後者は問題を修正しました）。ニュアンスに気づきにくいこの奇妙なものを見つけるのに何時間もかかった:(

私のために働いた別の可能な解決策：

現在、react-router-reduxベータ版であり、npmは4.xを返しますが、5.xは返しません。しかし、@types/react-router-redux返された5.x。したがって、未定義の変数が使用されました。

NPM / Yarnに5.xを使用するように強制することで解決しました。

あなたのエラーを考えると：

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

私の場合、インポートはライブラリが原因で暗黙的に行われていました。

変更してなんとか修正しました

export class Foo

に

export default class Foo。

同じルート名の同じディレクトリに.jsxファイルと.scssファイルがあると、このエラーに遭遇しました。

したがって、たとえば、あなたが持っている場合Component.jsxとComponent.scss同じフォルダに、あなたがこれを行うにしてみてください。

import Component from ./Component

Webpackは明らかに混乱し、少なくとも私の場合は、本当に.jsxファイルが必要なときにscssファイルをインポートしようとします。

.scssファイルの名前を変更し、あいまいさを回避することで修正できました。Component.jsxを明示的にインポートすることもできます

そして私の場合、私はサブモジュールの1つのimport-declerationにセミコロンがないだけでした。

これを変更して修正しました：

import Splash from './Splash'

これに：

import Splash from './Splash';

私の場合、デフォルトのエクスポートを使用していましたが、functionまたはをエクスポートせずReact.Component、JSX要素のみをエクスポートしていました。

エラー：

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

作品：

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

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() ドキュメントをご覧ください。

反応ルーティングでこのエラーが発生しました、問題は私が使用していたことでした

<Route path="/" component={<Home/>} exact />

しかし、それは間違ったルートでしたが、クラス/関数としてコンポーネントが必要なので、私はそれを

<Route path="/" component={Home} exact />

そしてそれは働いた。（コンポーネントの周りのブレースを避けてください）

私にとって、スタイル付きコンポーネントは、機能コンポーネントの定義の後に定義されていました。これはステージングでのみ発生し、ローカルでは発生しませんでした。styled-componentsをコンポーネント定義の上に移動すると、エラーはなくなりました。

インポートされたコンポーネントの一部が誤って宣言されているか、存在しないことを意味します

私は同様の問題がありました、私はしました

import { Image } from './Shared'

共有ファイルを調べたところ、「Image」コンポーネントではなく「ItemImage」コンポーネントがありませんでした。

import { ItemImage } from './Shared';

これは、他のプロジェクトからコードをコピーしたときに発生します;）

React.Fragment反応のバージョンがだったため、で問題が発生したため< 16.2、それを取り除きました。

@Balasubramani Mがここで私を救った。人を助けるためにもう1つ追加したかった。これは、あまりにも多くのものを接着し、バージョンを使いこなす場合の問題です。material-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';

私は同じ問題を抱えていましたが、問題はいくつかのjsファイルがその特定のページのバンドルに含まれていないことでした。それらのファイルを含めてみてください。問題が修正される可能性があります。これは私がしました：

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

そしてそれは私のために問題を修正しました。

Dot NEt MVCでReactを使用していたとき

このエラーの別の理由を発見しました。CSS-in-JSがReactコンポーネントのreturn関数の最上位のJSXにnull値を返すことに関係しています。

例えば：

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です。

このエラーが続きます：

キャッチされないエラー：要素タイプが無効です：文字列（組み込みコンポーネントの場合）またはクラス/関数（複合コンポーネントの場合）が必要ですが、nullです。

レンダリングしようとしているCSS-in-JSコンポーネントを備えたCSSがなかったことが原因であることがわかりました。CSSが返され、null値ではないことを確認することで修正しました。

例えば：

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>
  );
}

ほぼ同じエラーが発生します。

キャッチされていません（約束されています）エラー：要素タイプが無効です：文字列（組み込みコンポーネントの場合）またはクラス/関数（複合コンポーネントの場合）が必要ですが、オブジェクト：を取得しました。

私のチームが開発した別のノードライブラリから純粋な機能コンポーネントをインポートしようとしていました。それを修正するには、絶対インポートに変更する必要がありました（内部のコンポーネントへのパスを参照node_modules）

「team-ui」からFooBarListをインポートします。

に

'team-ui / lib / components / foo-bar-list / FooBarList'からFooBarListをインポートします。

私の場合、次のようにインポートされた外側のコンポーネントになりました：

import React, { Component } from 'react';

そして次のように宣言します：

export default class MyOuterComponent extends Component {

内部コンポーネントがReactベアをインポートした場合：

import React from 'react';

宣言のためにそれに点在します：

export default class MyInnerComponent extends ReactComponent {

私の場合、検索してメイトをチェックするのにかなりの時間を要しましたが、この方法でのみ修正されました。カスタムコンポーネントをインポートするときに「{」、「}」を削除します。

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;