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

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;

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.

Anda perlu ekspor default atau memerlukan (path). default

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

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() { ...

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

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>

  )
}

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.

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.

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

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

Saya mendapatkan ini dengan melakukan import App from './app/';mengharapkannya untuk mengimpor ./app/index.js, tetapi malah diimpor ./app.json.

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

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.

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 :(

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.

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 ____

Dalam kasus saya, impor terjadi secara implisit karena perpustakaan.

Saya berhasil memperbaikinya dengan mengubah

export class Foo

untuk

export default class Foo.

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

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

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

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.

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)

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.

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

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

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

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

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

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

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 {

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;