React.createElement: loại không hợp lệ - dự kiến ​​là một chuỗi

Cố gắng để bộ định tuyến phản ứng (v4.0.0) và trình tải phản ứng nóng (3.0.0-beta.6) phát tốt, nhưng lỗi sau đây trong bảng điều khiển trình duyệt:

Cảnh báo: React.createElement: loại không hợp lệ - dự kiến ​​là một chuỗi (cho các thành phần tích hợp sẵn) hoặc một lớp / hàm (cho các thành phần hỗn hợp) nhưng có: không xác định. Có thể bạn đã quên xuất thành phần của mình từ tệp mà nó được định nghĩa trong đó.

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

route.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;

Phần lớn trường hợp này là do xuất / nhập không chính xác.

Lỗi thường gặp:

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

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

Tùy chọn khả thi:

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

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

Có một số cách nó có thể sai, nhưng lỗi đó là do nhập / xuất không khớp 60% mọi lúc.

Biên tập

Thông thường, bạn sẽ nhận được một stacktrace cho biết vị trí gần đúng của nơi xảy ra lỗi. Điều này thường diễn ra ngay sau thông báo bạn có trong câu hỏi ban đầu của mình.

Nếu nó không hiển thị, bạn nên điều tra lý do tại sao (nó có thể là cài đặt xây dựng mà bạn đang thiếu). Bất kể, nếu nó không hiển thị, hành động duy nhất là thu hẹp nơi xuất / nhập không thành công.

Đáng buồn thay, cách duy nhất để làm điều đó mà không có stacktrace là xóa thủ công từng mô-đun / mô-đun con cho đến khi bạn không gặp lỗi nữa, sau đó làm việc theo cách của bạn sao lưu ngăn xếp.

Chỉnh sửa 2

Qua nhận xét, đó thực sự là một vấn đề nhập khẩu, cụ thể là nhập một mô-đun không tồn tại

Tôi cũng nhận được lỗi này.

Tôi đang sử dụng:

import BrowserRouter from 'react-router-dom';

Thay vào đó, bản sửa lỗi đang làm điều này:

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

Thử cái này

npm i react-router-dom@next

trong App.js của bạn

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;

Bạn cần phải lưu ý named exportvà default export. Xem Khi nào tôi nên sử dụng dấu ngoặc nhọn cho nhập ES6?

Trong trường hợp của tôi, tôi đã sửa nó bằng cách thay đổi từ

import Provider from 'react-redux'

đến

import { Provider } from 'react-redux'

Tôi gặp sự cố này khi thêm tệp css vào cùng thư mục với tệp thành phần.

Báo cáo nhập khẩu của tôi là:

import MyComponent from '../MyComponent'

điều này tốt khi chỉ có một tệp duy nhất, MyComponent.jsx. (Tôi đã thấy định dạng này trong một ví dụ và đã thử, sau đó quên mất rằng tôi đã làm được)

Khi tôi thêm MyComponent.scss vào cùng một thư mục, quá trình nhập không thành công. Có thể JavaScript đã tải tệp .scss thay thế và do đó không có lỗi.

Kết luận của tôi: luôn chỉ định phần mở rộng tệp ngay cả khi chỉ có một tệp, trong trường hợp bạn thêm một tệp khác sau đó.

Đối với những người dùng google trong tương lai:

Giải pháp của tôi cho vấn đề này là nâng cấp reactvà react-domlên phiên bản mới nhất của chúng trên NPM. Rõ ràng là tôi đang nhập một Thành phần đang sử dụng cú pháp phân đoạn mới và nó đã bị hỏng trong phiên bản React cũ của tôi.

Sự cố này đã xảy ra với tôi khi tôi có một tham chiếu không hợp lệ trong câu lệnh kết xuất / trả về của mình. (trỏ đến một lớp không tồn tại). Ngoài ra, hãy kiểm tra mã báo cáo trả lại của bạn để biết các tham chiếu không hợp lệ.

Hầu hết thời gian, điều này chỉ ra lỗi nhập / xuất. Nhưng hãy cẩn thận để không chỉ đảm bảo rằng tệp được tham chiếu trong dấu vết ngăn xếp được tự xuất tốt mà còn rằng tệp này đang nhập các thành phần khác một cách chính xác. Trong trường hợp của tôi, lỗi như sau:

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;

Tôi nghĩ rằng điều quan trọng nhất cần nhận ra khi khắc phục lỗi này là nó biểu hiện khi bạn cố gắng khởi tạo một thành phần không tồn tại. Thành phần này không cần phải được nhập. Trong trường hợp của tôi, tôi đã chuyển các thành phần dưới dạng thuộc tính. Tôi quên cập nhật một trong các lệnh gọi để chuyển thành phần đúng cách sau một số lần tái cấu trúc. Thật không may, vì JS không được nhập tĩnh nên lỗi của tôi không bị bắt và phải mất một thời gian để tìm ra điều gì đang xảy ra.

Để khắc phục lỗi này, hãy kiểm tra thành phần trước khi bạn kết xuất nó, để đảm bảo rằng đó là loại thành phần bạn mong đợi.

Tôi đã thiếu một React Fragment :

function Bar({ children }) {

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

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

Đoạn mã trên ném lỗi ở trên. Nhưng điều này khắc phục nó:

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

Điều còn thiếu đối với tôi là tôi đã sử dụng

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

thay vào đó hoặc câu trả lời đúng phải là:

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

Tất nhiên bạn cần thêm gói npm react -router-dom :

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

Trong trường hợp của tôi, tôi đã quên nhập và xuất các phần tử (mới) của mình được gọi bởi kết xuất trong tệp index.js.

Mảng các thành phần

Một cách phổ biến để gặp lỗi này là sử dụng một mảng các thành phần , với một chỉ số vị trí được sử dụng để chọn thành phần sẽ hiển thị từ mảng. Tôi đã thấy một mã như thế này nhiều lần:

const checkoutSteps = [Address, Shipment, Payment]

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

  const ToRender = checkoutSteps[step]

  return (
    <ToRender />
  )
}

Đây không phải là mã xấu cần thiết, nhưng nếu bạn gọi nó với một chỉ số sai (ví dụ -1, hoặc 3trong trường hợp này), các ToRenderthành phần sẽ undefined, ném các React.createElement: type is invalid...lỗi:

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

Một giải pháp hợp lý

Bạn nên bảo vệ bản thân và đồng nghiệp khỏi đoạn mã khó gỡ lỗi này bằng cách tiếp cận rõ ràng hơn, tránh những con số ma thuật và sử dụng 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

Và mã của bạn sẽ giống như sau:

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

Lợi ích của phương pháp này

• mã rõ ràng hơn , bạn có thể thấy rõ những gì bạn muốn hiển thị
• bạn không cần phải nhớ các con số và ý nghĩa ẩn của chúng ( 1là Địa chỉ, 2 là ...)
• lỗi là rõ ràng quá
• không đau đầu cho đồng nghiệp của bạn :)

Trong trường hợp của tôi, thứ tự bạn tạo thành phần và hiển thị, rất quan trọng. Tôi đã kết xuất thành phần trước khi tạo nó. Cách tốt nhất là tạo thành phần con và sau đó là các thành phần mẹ và sau đó kết xuất thành phần mẹ. Thay đổi thứ tự đã khắc phục sự cố cho tôi.

Trong trường hợp của tôi, tôi chỉ cần nâng cấp từ react-router-reduxlên react-router-redux@next. Tôi cho rằng nó phải là một số loại vấn đề tương thích.

Nói một cách đơn giản, bằng cách nào đó điều sau đang xảy ra:

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

Nó có thể không nhất thiết phải liên quan đến một số nhập hoặc xuất không chính xác:

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

    return (
        <MyComponent />
    );
}

Nếu bạn gặp lỗi này khi kiểm tra một thành phần, hãy đảm bảo rằng mọi thành phần con hiển thị chính xác khi chạy một mình, nếu một trong các thành phần con của bạn phụ thuộc vào tài nguyên bên ngoài để kết xuất, hãy thử mô phỏng nó bằng jest hoặc bất kỳ câu lệnh chế nhạo nào khác:

Thực hiện:

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

Trong trường hợp của tôi, đã xảy ra lỗi khi cố gắng sử dụng ContextApi. Tôi đã sử dụng nhầm:

const MyContext = () => createContext()

Nhưng lẽ ra nó phải được định nghĩa là:

const MyContext = createContext()

Tôi đăng nó ở đây để những khách truy cập trong tương lai mắc phải một lỗi ngớ ngẩn như vậy sẽ thấy hữu ích để tránh hàng giờ đau đầu, vì đây không phải là do nhập / xuất sai.

Sự phụ thuộc vào vòng tròn cũng là một trong những lý do giải thích cho điều này. [nói chung]

Đây là một lỗi mà một số cách phải gỡ lỗi. Như đã nói nhiều lần, việc nhập / xuất không đúng có thể gây ra lỗi này nhưng đáng ngạc nhiên là tôi gặp lỗi này từ một lỗi nhỏ trong react-router-dom authentication setuptrường hợp của tôi dưới đây:

THIẾT LẬP SAI:

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

CÀI ĐẶT ĐÚNG:

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

Sự khác biệt duy nhất là tôi đã giải cấu trúc tokentrong PrivateRoute component. Bằng cách mã thông báo được lấy từ localstoragenhư thế này, const token = localStorage.getItem("authUser");vì vậy nếu nó không có ở đó, tôi biết người dùng chưa được xác thực. Điều này cũng có thể gây ra lỗi đó.

Nó khá đơn giản, thực sự. Tôi gặp sự cố này khi bắt đầu viết mã React và vấn đề hầu như luôn xảy ra vì quá trình nhập:

import React, { memo } from 'react';

Bạn có thể sử dụng cấu trúc này vì react lib có một thuộc tính là bản ghi nhớ, nhưng bạn không thể hủy cấu trúc một cái gì đó như thế này

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

bởi vì nó không phải là một đối tượng.

Hy vọng nó giúp!

React.Fragment

đã khắc phục sự cố cho tôi

Mã lỗi:

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

Sửa chữa

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

Đây không phải là vấn đề trực tiếp liên quan đến xuất nhập khẩu. Trong trường hợp của tôi, tôi đang hiển thị phần tử con bên trong phần tử mẹ và phần tử con có phần tử / thẻ jsx được sử dụng nhưng không được nhập. Tôi đã nhập nó và tôi sử dụng nó sau đó nó đã khắc phục được sự cố. Vì vậy, vấn đề là ở các phần tử jsx bên trong phần tử con KHÔNG PHẢI việc xuất bản thân phần tử con.

Tôi chỉ dành 30 phút để cố gắng giải quyết vấn đề cơ bản CƠ BẢN này.

Vấn đề của tôi là tôi đang nhập các phần tử gốc phản ứng

ví dụ import React, { Text, Image, Component } from 'react';

Và cố gắng sử dụng chúng, điều này khiến tôi nhận được lỗi này.

Khi tôi chuyển từ <Text>đến <p>và <Image>để <img>tất cả mọi thứ đã làm việc như mong đợi.

Tôi gặp phải lỗi này và không có câu trả lời nào là trường hợp của tôi, nó có thể giúp ai đó trên googling:

Tôi đã xác định sai Proptype:

ids: PropTypes.array(PropTypes.string)

Nó phải là:

ids: PropTypes.arrayOf(PropTypes.string)

VSCode và lỗi biên dịch không cho tôi gợi ý chính xác.

BIÊN TẬP

Bạn đang hoàn thiện quy trình. Chỉ cần làm điều này:

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

route.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;