Uncaught Error: Pelanggaran Invarian: Tipe elemen tidak valid: diharapkan sebuah string (untuk komponen bawaan) atau kelas / fungsi tetapi mendapat: objek


528

Saya mendapatkan kesalahan ini:

Uncaught Error: Pelanggaran Invarian: Tipe elemen tidak valid: diharapkan sebuah string (untuk komponen bawaan) atau kelas / fungsi (untuk komponen komposit) tetapi didapat: objek.

Ini kode saya:

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.jsxFile saya :

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;



Kesalahan ini dapat meningkat jika Anda mencoba mengimpor komponen yang tidak ada . Pastikan Anda tidak memiliki kesalahan ketik dan komponen itu memang bernama seperti itu. Dalam hal perpustakaan pastikan Anda menggunakan versi yang tepat, karena komponen dapat memiliki nama yang berbeda di versi yang berbeda.
totymedli

Ini juga bisa terjadi ketika Anda mendefinisikan properti, mungkin melalui penghancuran ES6, dengan nama yang sama dengan komponen yang sudah diimpor (dan mencoba untuk meneruskannya ke komponen lain).
Philip Murphy

Jawaban:


887

Dalam kasus saya ( menggunakan Webpack ) perbedaan antara:

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

vs.

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

Yang kedua bekerja sementara yang pertama menyebabkan kesalahan. Atau sebaliknya.


81
Googler dari masa depan di sini, terima kasih ini masalah saya! Masuk akal dalam retrospeksi karena yang pertama merusak ekspor, tetapi jika Anda menggunakan default, maka itu hanya mencoba merusak fungsi / kelas.
ebolyen

3
Untuk orang-orang masa depan, kasus saya adalah salah ketik nama elemen yang saya gunakan. Saya berubah <TabBarIOS.item>menjadi<TabBarIOS.Item>
Ryan-Neal Mes

6
Sangat besar Mengapa demikian?
lol

45
Bagi siapa pun yang masih bertanya-tanya mengapa ini bekerja - {MyComponent} mengimpor ekspor 'MyComponent' dari file '../components/xyz.js' - Yang kedua mengimpor ekspor default dari '../components/xyz.js'.
ShaunYearStrong

Mungkin juga karena impor di dalam MyComponent. dalam kasus saya kesalahan disebutkan MyComponent, tetapi sebenarnya mengimpor pernyataan di dalamnya menyebabkan rror: import {SomeLibraryCompenent} dari 'some-library'
ykorach

159

Anda perlu ekspor default atau memerlukan (path). default

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

2
Saya punya masalah dengan 'react-native-navbar'. Saya menelepon default pada kebutuhan dan itu memperbaiki masalah saya. Terima kasih.
Varand Pezeshkian

3
Hmm, menambahkan .default dalam kasus saya menyelesaikan masalah. Namun, saya sebenarnya mengekspor default Home extends Component pada kelas itu, jadi saya akan berharap itu berfungsi tanpa '.default'
Marc

3
dapatkah Anda menjelaskan alasan seperti apa yang terjadi ketika kami menambahkan default?
Subham Tripathi

1
itu berhasil tetapi dapatkah seseorang membuat penjelasan tentang apa yang tidak .default lakukan.
Burak Karasoy

1
@ BurakKarasoy Anda memerlukan .default karena cara standar Babel membangun modul adalah untuk mengubah export defaultpernyataan exports.defaultsehingga Anda harus menggunakan .defaultketika Anda mengimpor modul. Salah satu cara untuk menghilangkannya adalah dengan menggunakan babel-plugin-add-module-ekspor yang mengembalikan perilaku default.
Jean-Baptiste Louazel

54

Apakah Anda baru saja memodulasi komponen React Anda? Jika ya, Anda akan mendapatkan kesalahan ini jika Anda lupa menentukan module.exports , misalnya:

komponen / kode yang sebelumnya tidak termodulasi yang valid:

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

komponen / kode termodulasi dengan module.exports :

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

2
Apakah sama dengan membuat kelas dan kemudian mengekspor? Seperti cuplikan pertama Anda dan kemudianmodule.exports = YourReactComponent
Nick Pineda

3
Saya dapat menyederhanakan ini ke:export default class YourReactComponent extends React.Component {
cpres

Mendapatkan kesalahan yang sama. Saya dapat merendernya dalam satu komponen tetapi tidak dapat membuatnya dalam komponen lain.
Mr_Perfect

Bahkan saya sebutkan module.exportsmasih mendapatkan kesalahan
Mr_Perfect

20

Jika Anda mendapatkan kesalahan ini, itu mungkin karena Anda mengimpor tautan menggunakan

import { Link } from 'react-router'

alih-alih, mungkin lebih baik digunakan

impor {Tautan} dari ' react-router-dom '
                      ^ -------------- ^

Saya percaya ini adalah persyaratan untuk router versi bereaksi


Teman saya yang mengimpor Tautan dari react, alih-alih react-router-dom. Memperbaiki masalah. Belum pernah melihat pesan salah ini sebelumnya.
O-9

18

https://github.com/rackt/react-router/blob/e7c6f3d848e55dda11595447928e843d39bed0eb/examples/query-params/app.js#L4 Router juga merupakan salah satu properti dari react-router. Jadi, ubah modul Anda memerlukan kode seperti itu:

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

Jika Anda ingin menggunakan sintaks ES6 yang menggunakan tautan ( import), gunakan babel sebagai pembantu.

BTW, untuk membuat karya kode Anda, kita dapat menambahkan {this.props.children}dalam App, seperti

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

  )
}

Maaf untuk tidak menguji dengan hati-hati tadi malam, tidak ada masalah di komponen Home Anda. Bisakah Anda mencoba yang baru saja saya edit?
David Guan

18

Jangan kaget dengan daftar jawaban untuk satu pertanyaan. Ada berbagai penyebab masalah ini;

Untuk kasus saya, peringatan itu

warning.js: 33 Peringatan: React.createElement: jenis tidak valid - diharapkan string (untuk komponen bawaan) atau kelas / fungsi (untuk komponen komposit) tetapi didapat: tidak terdefinisi. Anda mungkin lupa mengekspor komponen Anda dari file yang ditentukan. Periksa kode Anda di index.js: 13.

Diikuti oleh kesalahan

invariant.js: 42 Uncaught Error: Tipe elemen tidak valid: diharapkan sebuah string (untuk komponen bawaan) atau kelas / fungsi (untuk komponen komposit) tetapi didapat: tidak terdefinisi. Anda mungkin lupa untuk mengekspor komponen Anda dari file yang ditentukan.

Saya tidak dapat memahami kesalahan karena tidak menyebutkan metode atau nama file apa pun. Saya bisa menyelesaikan hanya setelah melihat peringatan ini, yang disebutkan di atas.

Saya memiliki baris berikut di index.js.

<ConnectedRouter history={history}>

Ketika saya mencari kesalahan di atas dengan kata kunci "ConnectedRouter", saya menemukan solusinya di halaman GitHub.

Kesalahannya adalah karena, ketika kita menginstal react-router-reduxpaket, secara default kita menginstal yang ini. https://github.com/reactjs/react-router-redux tetapi bukan perpustakaan sebenarnya.

Untuk mengatasi kesalahan ini, instal paket yang sesuai dengan menentukan lingkup npm dengan @

npm install react-router-redux@next

Anda tidak perlu menghapus paket yang salah pasang. Ini akan ditimpa secara otomatis.

Terima kasih.

PS: Bahkan peringatan membantu kamu. Jangan abaikan peringatan hanya dengan melihat kesalahannya saja.


Saya berharap saya dapat memilih ini beberapa kali.
Cizaphil

15

Dalam kasus saya, salah satu modul anak yang diekspor tidak mengembalikan komponen reaksi yang tepat.

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

dari pada

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

Kesalahan yang ditampilkan adalah untuk orang tua, karenanya tidak bisa mengetahuinya.


11

Dalam kasus saya, itu disebabkan oleh simbol komentar yang salah. Ini salah:

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

Ini benar:

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

Perhatikan kurung keriting


10

Saya memiliki kesalahan yang sama: ERROR FIX !!!!

Saya menggunakan 'react-router-redux' v4 tapi dia buruk .. Setelah npm instal react-router-redux @ next saya berada di "react-router-redux": "^ 5.0.0-alpha.9",

DAN BEKERJA



8

Saya mengalami masalah yang sama dan menyadari bahwa saya menyediakan komponen Undefined React di markup JSX. Masalahnya adalah komponen reaksi untuk membuat dihitung secara dinamis dan akhirnya menjadi tidak terdefinisi!

Kesalahan tersebut menyatakan:

Pelanggaran Invarian: Tipe elemen tidak valid: diharapkan string (untuk komponen bawaan) atau kelas / fungsi (untuk komponen komposit) tetapi didapat: tidak terdefinisi. Anda mungkin lupa mengekspor komponen Anda dari file yang ditentukan. Periksa metode render C.,

Contoh yang menghasilkan kesalahan ini:

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>
  }
  
  // ...
}

Masalahnya adalah disediakan "uiType" yang tidak valid dan karena itu ini menghasilkan tidak terdefinisi sebagai hasilnya:

templates['InvalidString']


Saya tampaknya memiliki kesalahan yang sama dengan react-fine-uploader, tetapi belum dapat menemukan apa pun (belum). Ini memiliki komponen Galeri yang saya impor dan pergi ke metode render juga, tetapi dalam hal render terjadi, saya tidak yakin apakah itu masalah perpustakaan atau masalah saya karena saya cukup baru untuk bereaksi.
Zia Ul Rehman Mughal

Punya kesalahan serupa di mana ada kesalahan dalam komponen yang kompleks. Metode debug sederhana adalah untuk sementara menyederhanakan komponen, misalnya const MyComponent = () => <div>my component</div>;hanya untuk melihat apakah impor berfungsi normal.
metakermit

Akan berguna untuk dapat mendeteksi ini, misalnya dengan aturan serat.
Will Cain

7

Sama seperti tambahan cepat untuk ini. Saya mengalami masalah yang sama dan ketika Webpack sedang mengkompilasi tes saya dan aplikasi berjalan dengan baik. Ketika saya mengimpor komponen saya ke file tes saya menggunakan kasus yang salah pada salah satu impor dan itu menyebabkan kesalahan yang sama.

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

Seharusnya begitu

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

Perhatikan bahwa nama impor myComponenttergantung pada nama ekspor di dalam MyComponentfile.


7

Punya masalah serupa dengan React Native versi terbaru 0.50 dan lebih tinggi.

Bagi saya itu adalah perbedaan antara:

import App from './app'

dan

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

(yang terakhir memperbaiki masalah). Butuh waktu berjam-jam untuk menangkap nuansa aneh, sulit untuk diperhatikan ini :(


6

Solusi lain yang mungkin, yang bekerja untuk saya:

Saat ini, react-router-reduxdalam versi beta dan npm mengembalikan 4.x, tetapi tidak 5.x. Tapi @types/react-router-redux5.x. dikembalikan Jadi ada variabel tidak pasti yang digunakan.

Memaksa NPM / Yarn untuk menggunakan 5.x menyelesaikannya untuk saya.


6

Mengingat kesalahan Anda tentang:

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

Anda memiliki 2 opsi:

  1. File ekspor Anda dapat memiliki kata defaultseperti pada export default class ____.... Kemudian impor Anda harus menghindari penggunaan {}di sekitarnya. Seperti dalamimport ____ from ____

  2. Hindari menggunakan kata standar. Maka ekspor Anda terlihat seperti export class ____... Lalu impor Anda harus menggunakan {}. Sukaimport {____} from ____


Jawaban yang luar biasa !!! +1 ... Saya benar-benar mengabaikannya export default {component name}dan lupa menambahkannya
Si8

@ Si8 Senang bisa membantu dan terima kasih telah membuat saya tersenyum hal pertama di pagi hari.
jasonleonhard

5

Dalam kasus saya, impor terjadi secara implisit karena perpustakaan.

Saya berhasil memperbaikinya dengan mengubah

export class Foo

untuk

export default class Foo.


5

Saya mengalami kesalahan ini ketika saya memiliki file .jsx dan .scss di direktori yang sama dengan nama root yang sama.

Jadi, misalnya, jika Anda memiliki Component.jsxdan Component.scssdi folder yang sama dan Anda mencoba melakukan ini:

import Component from ./Component

Webpack tampaknya menjadi bingung dan, setidaknya dalam kasus saya, mencoba mengimpor file scss ketika saya benar-benar menginginkan file .jsx.

Saya dapat memperbaikinya dengan mengganti nama file .scss dan menghindari ambiguitas. Saya bisa juga mengimpor Component.jsx secara eksplisit


1
Anda Tuan, adalah penyelamat. Dalam kasus saya itu pada dasarnya Component.json (file data).
tengen

4

Dan dalam kasus saya, saya baru saja kehilangan titik koma pada deklarasi impor di salah satu sub modul saya.

Memperbaikinya dengan mengubah ini:

import Splash from './Splash'

untuk ini:

import Splash from './Splash';

2
Oh Tuhan. Sobat, kau menyelamatkan hidupku. Saya benar-benar tidak mengerti mengapa builder tidak melaporkan hal ini kepada Anda.
Milan Vlach

4

Dalam kasus saya, saya menggunakan ekspor default, tetapi tidak mengekspor functionatau React.Component, tetapi hanya JSXelemen, yaitu

Kesalahan:

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

Bekerja:

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

2

Selain import/ exportmasalah yang disebutkan. Saya menemukan menggunakan React.cloneElement()untuk menambah propselemen anak dan kemudian memberikannya memberi saya kesalahan yang sama ini.

Saya harus berubah:

render() {
  const ChildWithProps = React.cloneElement(
    this.props.children,
    { className: `${PREFIX}-anchor` }
  );

  return (
    <div>
      <ChildWithProps />
      ...
    </div>
  );
}

untuk:

render() {
  ...
  return (
    <div>
      <ChildWithProps.type {...ChildWithProps.props} />
    </div>
  );
}

Lihat React.cloneElement() dokumen untuk info lebih lanjut.


2

Saya mendapat kesalahan ini dalam mereaksikan perutean, masalahnya adalah saya menggunakan

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

tapi rute yang salah memerlukan komponen sebagai kelas / fungsi jadi saya mengubahnya menjadi

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

dan itu berhasil. (Hanya menghindari kawat gigi di sekitar komponen)


Dalam beberapa cara yang berbeda, solusi saya adalah kebalikan dari Anda, :), tetapi saya berterima kasih untuk membuka mata saya.
Yulio Aleman Jimenez

1

Bagi saya itu adalah bahwa komponen gaya saya didefinisikan setelah definisi komponen fungsional saya. Itu hanya terjadi dalam pementasan dan bukan secara lokal untuk saya. Setelah saya memindahkan komponen gaya saya di atas definisi komponen saya kesalahan itu hilang.


1

Ini berarti beberapa Komponen Anda yang diimpor dinyatakan salah atau tidak ada

Saya punya masalah serupa, saya punya

import { Image } from './Shared'

tetapi ketika saya melihat ke file Shared saya tidak memiliki komponen 'Gambar' melainkan Komponen 'ItemImage'

import { ItemImage } from './Shared';

Ini terjadi ketika Anda menyalin kode dari proyek lain;)


1

Saya memiliki masalah dengan React.Fragment, karena versi reaksi saya adalah < 16.2, jadi saya menyingkirkannya.


0

@Balasubramani M menyelamatkan saya di sini. Ingin menambahkan satu lagi untuk membantu orang. Ini adalah masalah ketika Anda menempelkan terlalu banyak hal bersama dan menjadi angkuh dengan versi. Saya memperbarui versi material-ui dan perlu berubah

import Card, {CardContent, CardMedia, CardActions } from "@material-ui/core/Card"; 

untuk ini:

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

Saya memiliki masalah yang sama dan masalahnya adalah beberapa file js tidak dimasukkan dalam bundling halaman tertentu. Coba sertakan file itu dan masalahnya mungkin sudah diperbaiki. Saya melakukan ini:

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

dan itu memperbaiki masalah bagi saya.

Ini sementara saya menggunakan Bereaksi di Dot NEt MVC


0

Saya telah menemukan alasan lain untuk kesalahan ini. Ini ada hubungannya dengan CSS-in-JS mengembalikan nilai nol ke JSX tingkat atas dari fungsi pengembalian dalam komponen Bereaksi.

Sebagai contoh:

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

Saya akan mendapatkan peringatan ini:

Peringatan: React.createElement: jenis tidak valid - diharapkan sebuah string (untuk komponen bawaan) atau kelas / fungsi (untuk komponen komposit) tetapi mendapat: nol.

Diikuti oleh kesalahan ini:

Uncaught Error: Jenis elemen tidak valid: diharapkan sebuah string (untuk komponen bawaan) atau kelas / fungsi (untuk komponen komposit) tetapi mendapat: nol.

Saya menemukan itu karena tidak ada CSS dengan komponen CSS-in-JS yang saya coba render. Saya memperbaikinya dengan memastikan ada CSS yang dikembalikan dan bukan nilai nol.

Sebagai contoh:

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

Saya mendapatkan kesalahan yang hampir sama:

Tidak tertangkap (berjanji) Kesalahan: Jenis elemen tidak valid: diharapkan sebuah string (untuk komponen bawaan) atau kelas / fungsi (untuk komponen komposit) tetapi didapat: objek.

Saya mencoba mengimpor komponen fungsional murni dari pustaka simpul lain yang dikembangkan tim saya. Untuk memperbaikinya, saya harus mengubah ke impor absolut (merujuk path ke komponen di dalamnya node_modules) dari

impor FooBarList dari 'team-ui';

untuk

impor FooBarList dari 'team-ui / lib / components / foo-bar-list / FooBarList';


0

Dalam kasus saya itu akhirnya menjadi komponen luar yang diimpor seperti ini:

import React, { Component } from 'react';

dan kemudian menyatakan seperti:

export default class MyOuterComponent extends Component {

di mana komponen dalam mengimpor Bereaksi telanjang:

import React from 'react';

dan bertitik ke dalamnya untuk deklarasi:

export default class MyInnerComponent extends ReactComponent {


0

Dalam kasus saya, saya butuh banyak waktu untuk mencari dan memeriksa beberapa cara tetapi hanya diperbaiki dengan cara ini: hapus "{", "}" saat mengimpor komponen khusus:

import OrderDetail from './orderDetail';

Cara saya yang salah adalah:

import { OrderDetail } from './orderDetail';

Karena dalam file orderDetail.js, saya mengekspor OrderDetail sebagai kelas default:

class OrderDetail extends Component {
  render() {
    return (
      <View>
        <Text>Here is an sample of Order Detail view</Text>
      </View>
    );
  }
}

export default OrderDetail;
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.