web-dev-qa-db-ja.com

キャッチされていないエラー：不変の違反：要素の型が無効です：文字列（組み込みコンポーネント用）またはクラス/関数が必要ですが、取得しました：object

私はこのエラーを受けています： 

キャッチされていないエラー：不変の違反：要素の型が無効です：文字列（組み込みコンポーネント用）またはクラス/関数（複合コンポーネント用）が必要です.

これは私のコードです：

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)

my Home.jsx file：

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;
reactjsreact-router
406
Pankaj Thakur

私の場合（ Webpackを使って ）、それは次のような違いでした。

import {MyComponent} from '../components/xyz.js';

vs

import MyComponent from '../components/xyz.js';

最初のエラーが原因で2番目のものは動作します。

732
JohnL

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

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

Reactコンポーネントをモジュール化したことはありますか？もしそうなら、 module.exports を指定するのを忘れた場合、このエラーになるでしょう。例えば：

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

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

module.exports を持つモジュール化されたコンポーネント/コード

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

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

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

ES6のシンタックスを使いたい場合は、リンクに（importname__）を使い、ヘルパーとして babel を使います。

ところで、あなたのコードを機能させるために、Appname __にのように{this.props.children}を追加することができます。

render() {
  return (
    <div>
      <h1>App</h1>
      <ul>
        <li><Link to="/about">About</Link></li>
      </ul>
      {this.props.children}
    </div>

  )
}
16
David Guan

このエラーが発生した場合は、リンクをインポートしている可能性があります。 

import { Link } from 'react-router'

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

から{Link}をインポートしますreact-router-dom'
 ^ -------------- ^

私はこれが反応ルータバージョン4のための要件であると信じます

15
NSCoder

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

私の場合、警告は

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

間違ってインストールされたパッケージを削除する必要はありません。自動的に上書きされます。

ありがとうございました。

シモンズ：warningでさえあなたを助けます。 errorだけを見ているだけでwarningを無視しないでください。

12
Balasubramani M

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

const Component = () => <div>Content</div>;の代わりにconst Component = <div> Content </div>;

表示されているエラーは親のためのものなので、把握できませんでした。

9
Katti

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

私は 'react-router-redux'v4を使用していますが、彼女は悪いです.. npmインストール後react-router-redux @nextオン "react-router-redux"： "^ 5.0.0-alpha.9"、

そしてそれは仕事です

8
Thibault Jp

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

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

これは正しいです：

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

波かっこに注意してください

7
tuanh118

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

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

import App from './app'

そして

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

（後者は問題を解決しました）。ニュアンスに気づくのが難しい、この奇妙なものを捕まえるために私に何時間もかけてください

6
Oleg

私はimport App from './app/';をインポートすることを期待して./app/index.jsを実行することによってこれを得ましたが、代わりに./app.jsonをインポートしました。

5
tybro0103

私は同じ問題を抱えていて、JSXマークアップで Undefined Reactコンポーネントを提供していることに気付きました。重要なのは、レンダリングする反応コンポーネントが動的に計算され、それが未定義になってしまうことです。

エラーは述べました：

不変違反：要素の型が無効です。文字列（組み込みコンポーネントの場合）またはクラス/関数（複合コンポーネントの場合）が必要ですが、未定義です。コンポーネントが定義されているファイルからコンポーネントをエクスポートするのを忘れている可能性があります。Cのrenderメソッドを確認してください。

このエラーが発生する例：

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

4
Christian Adam

これへの素早い追加として。私は同じ問題を抱えていました、そして、Webpackが私のテストをコンパイルしている間、そしてアプリケーションはうまく動いていました。コンポーネントをテストファイルにインポートしていたときに、インポートの1つで間違ったケースを使用していたため、同じエラーが発生していました。

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

になるはずだった

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

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

4
Blackout1985

もう1つの可能な解決策、それは私のために働きました：

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

NPM/Yarnに5.xを使わせることで解決しました。

3
Florian Richter

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

私は変更することによってそれを修正することができました

export class Foo

に

export default class Foo。

2
thedayturns

私の場合は、サブモジュールの1つのインポート宣言でセミコロンが足りませんでした。

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

import Splash from './Splash'

これに：

import Splash from './Splash';
2
Rikard Askelöf

私の場合は、デフォルトのエクスポートを使用していましたが、functionname__やReact.Componentはエクスポートしていませんでしたが、JSXname__要素だけをエクスポートしていました。

エラー：

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

作品：

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

import Rating from 'src/components/Rating';

vs

import Rating from 'src/components/Rating.js';

二つ目は私のために働いた。

1
Bat

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

たとえば、Component.jsxとComponent.scssが同じフォルダにあり、これを実行しようとしたとします。

import Component from ./Component

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

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

1
bergie3000

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

私は同様の問題を抱えていた

import { Image } from './Shared'

しかし共有ファイルを調べたとき、私は 'Image'コンポーネントではなく 'ItemImage'コンポーネントを持っていませんでした。

import { ItemImage } from './Shared';

あなたが他のプロジェクトからコードをコピーするとき、これは起こります;）

0
webmaster

私の場合、それはメタタグでした。

私が使っていた

const MetaTags = require('react-meta-tags');

私はMetaTagsがデフォルトのエクスポートであると思います、それでこれに変更することは私にとってそれを解決しました。

const { MetaTags } = require('react-meta-tags');
0
Sathesh Balakrishnan Manohar

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

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

間違ったルートだったので、クラス/関数としてコンポーネントが必要なので、

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

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

0
Naxxa Consulting

私はこのエラーの別の理由を発見しました。それはReactコンポーネントのreturn関数のトップレベルのJSXにnull値を返すCSS-in-JSと関係があります。

例えば：

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

私はこの警告を受けるでしょう：

Warning：React.createElement：typeが無効です - 文字列（組み込みコンポーネントの場合）またはクラス/関数（複合コンポーネントの場合）が必要ですが、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>
  );
}
0
alucinare

ファイルの下部でエクスポートすると解決する場合があります。

コストインジケータークローク=（小道具）=> {...}エクスポートデフォルトインジケータークローク;

0
Noimang

私はほとんど同じエラーを受けています：

（約束された）捕捉されていないエラー：要素型が無効です。文字列（組み込みコンポーネントの場合）またはクラス/関数（複合コンポーネントの場合）を予期していましたが：objectを取得しました。

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

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

に

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

0
Patrick

私の場合は、検索に多大な時間がかかりましたが、この方法でしか解決できませんでした。カスタムコンポーネントをインポートするときは "{"、 "}"を削除します。

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;
0
tiennsloit

私は同じ問題を抱えていて、問題はいくつかのjsファイルがその特定のページのバンドルに含まれていなかったことでした。それらのファイルを含めてみてください、そして問題は解決されるかもしれません。

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

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

これは私がDot NEt MVCでReactを使っていた時のものです

0
Jason

すべてのライブラリを最新バージョンにアップグレード中にこのエラーが発生しました

以下の古いバージョンではインポートです

import { TabViewAnimated, TabViewPagerPan } from 'react-native-tab-view';

しかし、新しいバージョンでは、それらは次のように置き換えられます。

import { TabView, PagerPan } from "react-native-tab-view";

コントロールクリックを使用して、すべてのインポートが利用可能であることを確認してください

0
Rajesh Nasit

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

0
Eugene

私のJavaScriptアプリケーションにTypeScriptを導入したときにこれを得ました。そのため、tsxファイルをインポートするときにjsファイルでインポートで.tsxを指定する必要がありました。

import ComponentName from "../component-name";から

import ComponentName from "../component-name.tsx";へ

0
kentrh

問題は、デフォルトのエクスポートに使用されるエイリアスでもあります。

変化する

import { Button as ButtonTest } from "../theme/components/Button";

に

import { default as ButtonTest } from "../theme/components/Button";

私のために問題を解決しました。

0
Simon

@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';
0
Kyle Pennell

私の場合は、このようにインポートされた外部コンポーネントになりました。

import React, { Component } from 'react';

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

export default class MyOuterComponent extends Component {

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

import React from 'react';

そして宣言のためにそれに点を打った：

export default class MyInnerComponent extends ReactComponent {

0
krayzk

間違ったライブラリをインポートしたため、私は同じ問題を抱えていたので、ライブラリのドキュメントを確認し、新しいバージョンでルートが変更されました。解決策は次のとおりです。

import {Ionicons} from '@expo/vector-icons';

そして、私は間違った方法で書いていました：

import {Ionicons} from 'expo';
0
hackemate ninja

私にとっては、私の style-components は私の機能的なコンポーネントの定義の後に定義されているということでした。それはステージングで起こっているだけで、私にとってはローカルではありませんでした。スタイル付きコンポーネントを自分のコンポーネント定義より上に移動すると、エラーはなくなりました。

0
Jadam

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()docs をご覧ください。

0
Greg K

あなたのエラーを考えて：

'Uncaught Error: Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function but got: object'

2つの選択肢があります。

  1. あなたのエクスポートファイルは、export default class ____....のようにWord defaultを持つことができます。そうすると、あなたのインポートはその周りに{}を使わないようにする必要があります。 import ____ from ____のように

  2. デフォルトのWordを使用しないでください。そうすると、あなたのエクスポートはexport class ____...のようになります。そしてあなたのインポートは{}を使わなければなりません。 import {____} from ____のように

0
jasonleonhard