React.createElement: type tidak valid - diharapkan sebuah string

Mencoba untuk mendapatkan react-router (v4.0.0) dan react-hot-loader (3.0.0-beta.6) untuk bermain dengan baik, tetapi mendapatkan kesalahan berikut di konsol browser:

Peringatan: React.createElement: type is invalid - diharapkan string (untuk komponen built-in) atau class / function (untuk komponen komposit) tetapi got: undefined. Anda mungkin lupa mengekspor komponen Anda dari file yang ditentukan di dalamnya.

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;

Sering kali hal ini disebabkan oleh ekspor / impor yang salah.

Kesalahan umum:

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

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

Opsi yang memungkinkan:

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

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

Ada beberapa kemungkinan kesalahannya, tetapi kesalahan itu terjadi karena 60% waktu impor / ekspor tidak cocok, setiap saat.

Edit

Biasanya Anda harus mendapatkan pelacakan tumpukan yang menunjukkan perkiraan lokasi di mana kegagalan terjadi. Ini biasanya mengikuti langsung setelah pesan yang Anda miliki dalam pertanyaan awal Anda.

Jika tidak muncul, mungkin ada baiknya menyelidiki mengapa (mungkin itu adalah pengaturan build yang Anda lewatkan). Terlepas dari itu, jika tidak muncul, satu-satunya tindakan adalah mempersempit di mana ekspor / impor gagal.

Sayangnya, satu-satunya cara untuk melakukannya, tanpa stacktrace adalah dengan menghapus setiap modul / submodule secara manual sampai Anda tidak mendapatkan kesalahan lagi, lalu lanjutkan ke atas tumpukan.

Edit 2

Melalui komentar, itu memang masalah impor, khususnya mengimpor modul yang tidak ada

Saya mendapatkan kesalahan ini juga.

Saya menggunakan:

import BrowserRouter from 'react-router-dom';

Perbaikan sedang melakukan ini, sebagai gantinya:

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

Coba ini

npm i react-router-dom@next

di App.js Anda

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;

Anda perlu menyadari named exportdan default export. Lihat Kapan saya harus menggunakan kurung kurawal untuk impor ES6?

Dalam kasus saya, saya memperbaikinya dengan mengubah dari

import Provider from 'react-redux'

untuk

import { Provider } from 'react-redux'

Saya mengalami masalah ini ketika saya menambahkan file css ke folder yang sama dengan file komponen.

Pernyataan impor saya adalah:

import MyComponent from '../MyComponent'

yang tidak masalah jika hanya ada satu file, MyComponent.jsx. (Saya melihat format ini dalam contoh dan mencobanya, lalu lupa saya telah melakukannya)

Ketika saya menambahkan MyComponent.scss ke folder yang sama, impor kemudian gagal. Mungkin JavaScript memuat file .scss sebagai gantinya, jadi tidak ada kesalahan.

Kesimpulan saya: selalu tentukan ekstensi file meskipun hanya ada satu file, jika Anda menambahkan yang lain nanti.

Untuk calon karyawan Google:

Solusi saya untuk masalah ini adalah meningkatkan reactdan react-domke versi terbaru mereka di NPM. Rupanya saya mengimpor Komponen yang menggunakan sintaks fragmen baru dan rusak di versi React saya yang lama.

Susunan komponen

Cara umum untuk mendapatkan kesalahan ini adalah menggunakan larik komponen , dengan indeks posisi yang digunakan untuk memilih komponen yang akan dirender dari larik. Saya melihat kode seperti ini berkali-kali:

const checkoutSteps = [Address, Shipment, Payment]

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

  const ToRender = checkoutSteps[step]

  return (
    <ToRender />
  )
}

Ini bukan kode buruk yang diperlukan, tetapi jika Anda memanggilnya dengan indeks yang salah (misalnya -1, atau 3dalam kasus ini), ToRenderkomponen tersebut akan undefined, menimbulkan React.createElement: type is invalid...kesalahan:

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

Solusi rasional

Anda harus melindungi diri Anda dan kolega Anda dari kode yang sulit di-debug ini menggunakan pendekatan yang lebih eksplisit, menghindari angka ajaib dan menggunakan 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

Dan kode Anda akan terlihat seperti ini:

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

Manfaat pendekatan ini

• kode lebih eksplisit , Anda dapat dengan jelas melihat apa yang ingin Anda render
• Anda tidak perlu mengingat angka dan tersembunyi mereka arti ( 1untuk Alamat, 2 untuk ...)
• kesalahan yang eksplisit terlalu
• tidak ada sakit kepala untuk rekan-rekan Anda :)

Masalah ini terjadi pada saya ketika saya memiliki referensi yang buruk dalam pernyataan render / pengembalian saya. (tunjuk ke kelas yang tidak ada). Juga periksa kode pernyataan pengembalian Anda untuk referensi yang buruk.

Sering kali ini menunjukkan kesalahan impor / ekspor. Namun berhati-hatilah untuk tidak hanya memastikan file yang direferensikan dalam pelacakan tumpukan diekspor sendiri dengan baik, tetapi juga bahwa file ini mengimpor komponen lain dengan benar. Dalam kasus saya kesalahannya seperti ini:

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;

Saya pikir hal yang paling penting untuk disadari ketika memecahkan masalah bug ini adalah bahwa itu terwujud ketika Anda mencoba membuat contoh komponen yang tidak ada. Komponen ini tidak harus diimpor. Dalam kasus saya, saya melewatkan komponen sebagai properti. Saya lupa memperbarui salah satu panggilan untuk meneruskan komponen dengan benar setelah beberapa refactoring. Sayangnya, karena JS tidak diketik secara statis, bug saya tidak tertangkap, dan butuh beberapa waktu untuk mencari tahu apa yang terjadi.

Untuk memecahkan masalah bug ini, periksa komponen sebelum Anda merendernya, untuk memastikan bahwa itu adalah jenis komponen yang Anda harapkan.

Saya melewatkan Fragmen React :

function Bar({ children }) {

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

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

Kode di atas memunculkan kesalahan di atas. Tapi ini memperbaikinya:

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

Apa yang hilang bagi saya adalah yang saya gunakan

import { Router, Route, browserHistory, IndexRoute } from 'react-router';

sebagai gantinya atau jawaban yang benar harus:

import { BrowserRouter as Router, Route } from 'react-router-dom';

Tentu Anda perlu menambahkan paket npm react-router-dom :

npm install react-router-dom@next --save

Dalam kasus saya, saya lupa mengimpor dan mengekspor elemen (baru) saya yang dipanggil oleh render di file index.js.

Dalam kasus saya, urutan pembuatan komponen dan render, itu penting. Saya merender komponen sebelum membuatnya. Cara terbaik adalah membuat komponen anak dan kemudian komponen induk dan kemudian merender komponen induk. Mengubah urutan memperbaiki masalah saya.

Dalam kasus saya, saya hanya perlu meningkatkan dari react-router-reduxmenjadi react-router-redux@next. Saya berasumsi itu pasti semacam masalah kompatibilitas.

Dengan kata sederhana, entah bagaimana hal berikut ini terjadi:

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

Ini mungkin tidak selalu terkait dengan beberapa impor atau ekspor yang salah:

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

    return (
        <MyComponent />
    );
}

Jika Anda mengalami error ini saat menguji sebuah komponen, pastikan bahwa setiap komponen turunan dirender dengan benar saat dijalankan sendiri, jika salah satu komponen turunan Anda bergantung pada resource eksternal untuk dirender, cobalah untuk memalsukannya dengan lelucon atau lib tiruan lainnya:

Contoh:

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

Dalam kasus saya, kesalahan terjadi saat mencoba menggunakan ContextApi. Saya telah salah menggunakan:

const MyContext = () => createContext()

Tapi itu seharusnya didefinisikan sebagai:

const MyContext = createContext()

Saya mempostingnya di sini sehingga pengunjung mendatang yang terjebak pada kesalahan konyol seperti itu akan terbantu untuk menghindari pusing selama berjam-jam, karena ini bukan disebabkan oleh impor / ekspor yang salah.

Ketergantungan melingkar juga merupakan salah satu alasannya. [secara umum]

Ini adalah kesalahan yang entah bagaimana harus men-debug. Seperti yang telah dikatakan berkali-kali, impor / ekspor yang tidak tepat dapat menyebabkan kesalahan ini tetapi yang mengejutkan saya mendapat kesalahan ini dari bug kecil di react-router-dom authentication setupbawah ini adalah kasus saya:

PENYIAPAN SALAH:

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

PENYIAPAN YANG BENAR:

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

Satu-satunya perbedaan adalah saya mendekonstruksi tokendi PrivateRoute component. Ngomong-ngomong token didapat dari localstorageseperti ini const token = localStorage.getItem("authUser");jadi jika tidak ada saya tahu pengguna tidak diautentikasi. Ini juga dapat menyebabkan kesalahan itu.

Ini cukup sederhana, sungguh. Saya mendapat masalah ini ketika saya mulai membuat kode React, dan masalahnya hampir selalu karena impor:

import React, { memo } from 'react';

Anda dapat menggunakan destructuring this karena react lib memiliki properti sebagai memo, tetapi Anda tidak dapat merusak sesuatu seperti ini

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

karena itu bukan objek.

Semoga membantu!

React.Fragment

memperbaiki masalah untuk saya

Kode Kesalahan:

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

Memperbaiki

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

Ini tidak perlu masalah langsung yang terkait dengan impor / ekspor. Dalam kasus saya, saya merender elemen anak di dalam elemen induk dan elemen anak memiliki elemen / tag jsx yang digunakan tetapi tidak diimpor. Saya mengimpornya dan saya menggunakannya lalu memperbaiki masalahnya. Jadi masalahnya ada di elemen jsx yang berada di dalam elemen anak BUKAN ekspor elemen anak itu sendiri.

xxxxx.prototype = {
  dxxxx: PropTypes.object.isRequired, // eslint-disable-line react/forbid-prop-types
};

Anda harus menambahkan // eslint-disable-line react/forbid-prop-types, lalu berhasil!

Saya hanya menghabiskan waktu 30 menit untuk mencoba memecahkan masalah dasar DASAR ini.

Masalah saya adalah saya mengimpor elemen asli react

misalnya import React, { Text, Image, Component } from 'react';

Dan mencoba menggunakannya, yang menyebabkan saya menerima kesalahan ini.

Setelah saya beralih dari <Text>ke <p>dan <Image>ke <img>semuanya bekerja seperti yang diharapkan.

Saya mendapatkan kesalahan ini dan tidak ada tanggapan yang merupakan kasus saya, ini mungkin membantu seseorang mencari di Google:

Saya salah mendefinisikan Proptype:

ids: PropTypes.array(PropTypes.string)

Harus:

ids: PropTypes.arrayOf(PropTypes.string)

VSCode dan kesalahan kompilasi tidak memberi saya petunjuk yang benar.

EDIT

Anda sedang memperumit prosesnya. Lakukan saja ini:

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;