Uncaught Error: Invariant Vi phạm: Kiểu phần tử không hợp lệ: dự kiến ​​một chuỗi (cho các thành phần tích hợp) hoặc một lớp / hàm nhưng got: object

Tôi nhận được lỗi này:

Uncaught Error: Invariant Vi phạm: Kiểu phần tử không hợp lệ: dự kiến ​​một chuỗi (đối với các thành phần tích hợp) hoặc một lớp / hàm (đối với các thành phần hỗn hợp) nhưng got: object.

Đây là mã của tôi:

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.jsxTập tin của tôi

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;

Trong trường hợp của tôi ( sử dụng Webpack ), đó là sự khác biệt giữa:

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

đấu với

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

Cái thứ hai hoạt động trong khi cái thứ nhất gây ra lỗi. Hoặc ngược lại.

bạn cần xuất mặc định hoặc yêu cầu (đường dẫn) .default

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

Bạn đã mô đun hóa bất kỳ thành phần React của bạn? Nếu có, bạn sẽ gặp lỗi này nếu bạn quên chỉ định module.exports , ví dụ:

thành phần / mã hợp lệ trước đây không được mô đun hóa:

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

thành phần / mã hóa được mô đun hóa với module.exports :

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

Nếu bạn gặp lỗi này, có thể là do bạn đang nhập liên kết bằng

import { Link } from 'react-router'

thay vào đó, nó có thể tốt hơn để sử dụng

nhập {Link} từ ' Reac-router-dom '
                      ^ -------------- ^

Tôi tin rằng đây là một yêu cầu cho bộ định tuyến phản ứng phiên bản 4

https://github.com/rackt/react-router/blob/e7c6f3d848e55dda11595447928e843d39bed0eb/examples/query-params/app.js#L4 Router cũng là một trong những thuộc tính của react-router. Vì vậy, thay đổi mô-đun của bạn yêu cầu mã như thế:

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

Nếu bạn muốn sử dụng cú pháp ES6, liên kết sử dụng ( import), hãy sử dụng babel làm người trợ giúp.

BTW, để làm cho mã của bạn hoạt động, chúng ta có thể thêm {this.props.children}vào App, như

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

  )
}

Đừng ngạc nhiên bởi danh sách các câu trả lời cho một câu hỏi. Có nhiều nguyên nhân cho vấn đề này;

Đối với trường hợp của tôi, cảnh báo là

warning.js: 33 Cảnh báo: React.createEuity: type không hợp lệ - dự kiến ​​một chuỗi (cho các thành phần tích hợp) hoặc một lớp / hàm (cho các thành phần hỗn hợp) nhưng got: không xác định. Bạn có thể quên xuất thành phần của mình từ tệp được xác định. Kiểm tra mã của bạn tại index.js: 13.

Tiếp theo là lỗi

invariant.js: 42 Uncaught Error: Kiểu phần tử không hợp lệ: dự kiến ​​một chuỗi (đối với các thành phần tích hợp) hoặc một lớp / hàm (đối với các thành phần hỗn hợp) nhưng got: không xác định. Bạn có thể quên xuất thành phần của mình từ tệp được xác định trong.

Tôi không thể hiểu lỗi vì nó không đề cập đến bất kỳ phương thức hoặc tên tệp nào. Tôi chỉ có thể giải quyết sau khi xem cảnh báo này, được đề cập ở trên.

Tôi có dòng sau tại index.js.

<ConnectedRouter history={history}>

Khi tôi tìm ra lỗi trên với từ khóa "ConnectedRouter", tôi đã tìm thấy giải pháp trong trang GitHub.

Lỗi là do, khi chúng tôi cài đặt react-router-reduxgói, theo mặc định , chúng tôi cài đặt gói này. https://github.com/reactjs/react-router-redux nhưng không phải là thư viện thực tế.

Để khắc phục lỗi này, hãy cài đặt gói thích hợp bằng cách chỉ định phạm vi npm với @

npm install react-router-redux@next

Bạn không cần phải gỡ bỏ gói cài đặt sai. Nó sẽ được ghi đè tự động.

Cảm ơn bạn.

PS: Ngay cả cảnh báo cũng giúp bạn. Đừng lơ là cảnh báo chỉ nhìn vào lỗi thôi.

Trong trường hợp của tôi, một trong các mô đun con đã xuất không trả về thành phần phản ứng thích hợp.

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

thay vì

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

Lỗi hiển thị là của cha mẹ, do đó không thể tìm ra.

Trong trường hợp của tôi, đó là do biểu tượng bình luận sai. Cái này sai:

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

Chính xác:

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

Chú ý dấu ngoặc nhọn

Tôi có cùng một lỗi: LRI CỐ ĐỊNH !!!!

Tôi sử dụng 'Reac-router-redux' v4 nhưng cô ấy rất tệ .. Sau khi cài đặt npm Reac -router-redux @ next Tôi đang sử dụng "Reac-router-redux": "^ 5.0.0-alpha.9",

VÀ CÔNG VIỆC CỦA NÓ

Tôi đã nhận được điều này bằng cách import App from './app/';mong đợi nó nhập khẩu ./app/index.js, nhưng thay vào đó nó được nhập khẩu ./app.json.

Tôi đã có cùng một vấn đề và nhận ra rằng tôi đang cung cấp một thành phần Phản ứng không xác định trong đánh dấu JSX. Vấn đề là thành phần phản ứng để kết xuất được tính toán động và cuối cùng nó không được xác định!

Các lỗi đã nêu:

Vi phạm bất biến: Loại phần tử không hợp lệ: dự kiến ​​một chuỗi (đối với các thành phần tích hợp) hoặc một lớp / hàm (đối với các thành phần hỗn hợp) nhưng có: không xác định. Bạn có thể quên xuất thành phần của mình từ tệp được xác định trong. Kiểm tra phương thức kết xuất của C.,

Ví dụ tạo ra lỗi này:

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

Vấn đề là một "uiType" không hợp lệ đã được cung cấp và do đó điều này tạo ra kết quả không xác định:

templates['InvalidString']

Chỉ là một bổ sung nhanh chóng cho điều này. Tôi đã có cùng một vấn đề và trong khi Webpack đang biên dịch các bài kiểm tra của tôi và ứng dụng đã chạy tốt. Khi tôi nhập thành phần của mình vào tệp kiểm tra, tôi đã sử dụng trường hợp không chính xác trên một trong những lần nhập và điều đó gây ra lỗi tương tự.

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

Đáng lẽ phải

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

Lưu ý rằng tên nhập myComponentphụ thuộc vào tên xuất trong MyComponenttệp.

Có vấn đề tương tự với React Native phiên bản mới nhất từ ​​0,5 trở lên.

Đối với tôi đó là một sự khác biệt giữa:

import App from './app'

và

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

(cái sau đã sửa vấn đề). Mất hàng giờ để tôi bắt gặp sắc thái kỳ lạ, khó nhận thấy này :(

Một giải pháp khả thi khác, có hiệu quả với tôi:

Hiện tại, react-router-reduxbản beta và npm trả về 4.x, nhưng không phải 5.x. Nhưng@types/react-router-redux trả lại 5.x. Vì vậy, có các biến không xác định được sử dụng.

Buộc NPM / Sợi sử dụng 5.x đã giải quyết nó cho tôi.

Cho lỗi của bạn về:

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

Bạn có 2 lựa chọn:

1. Tệp xuất của bạn có thể có từ defaultnhư trong export default class ____.... Sau đó, quá trình nhập của bạn sẽ cần tránh sử dụng {}xung quanh nó. Như trongimport ____ from ____

2. Tránh sử dụng từ mặc định. Sau đó, xuất của bạn trông giống như export class ____... Sau đó, nhập khẩu của bạn phải sử dụng {}. Giốngimport {____} from ____

Trong trường hợp của tôi, việc nhập đã xảy ra ngầm do một thư viện.

Tôi đã cố gắng sửa nó bằng cách thay đổi

export class Foo

đến

export default class Foo.

Tôi gặp phải lỗi này khi tôi có tệp .jsx và .scss trong cùng thư mục có cùng tên gốc.

Vì vậy, ví dụ, nếu bạn có Component.jsxvà Component.scsstrong cùng một thư mục và bạn cố gắng làm điều này:

import Component from ./Component

Webpack rõ ràng bị lẫn lộn và, ít nhất là trong trường hợp của tôi, cố gắng nhập tệp scss khi tôi thực sự muốn tệp .jsx.

Tôi đã có thể sửa nó bằng cách đổi tên tệp .scss và tránh sự mơ hồ. Tôi cũng có thể đã nhập rõ ràng Element.jsx

Và trong trường hợp của tôi, tôi chỉ thiếu một dấu chấm phẩy tại bộ giải mã nhập khẩu trong một trong các mô-đun phụ của tôi.

Đã sửa nó bằng cách thay đổi điều này:

import Splash from './Splash'

đến đây:

import Splash from './Splash';

Trong trường hợp của tôi, tôi đã sử dụng xuất mặc định, nhưng không xuất functionhoặc React.Component, nhưng chỉ làJSX phần tử, nghĩa là

Lỗi:

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

Làm :

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

Ngoài import/ exportvấn đề được đề cập. Tôi tìm thấy bằng cách sử dụng React.cloneElement()để thêmprops vào một phần tử con và sau đó kết xuất nó đã cho tôi lỗi tương tự.

Tôi đã phải thay đổi:

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

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

đến:

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

Xem React.cloneElement() tài liệu để biết thêm.

Tôi gặp lỗi này trong phản ứng định tuyến, vấn đề là tôi đang sử dụng

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

nhưng nó đã sai tuyến yêu cầu thành phần là một lớp / hàm nên tôi đã thay đổi nó thành

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

va no đa hoạt động. (Chỉ cần tránh các dấu ngoặc xung quanh thành phần)

Đối với tôi, đó là các thành phần theo kiểu của tôi được định nghĩa sau định nghĩa thành phần chức năng của tôi. Nó chỉ xảy ra trong dàn dựng và không phải địa phương đối với tôi. Khi tôi di chuyển các thành phần theo kiểu của mình lên trên định nghĩa thành phần, lỗi sẽ biến mất.

Điều đó có nghĩa là một số Thành phần đã nhập của bạn bị khai báo sai hoặc không tồn tại

Tôi đã có một vấn đề tương tự, tôi đã làm

import { Image } from './Shared'

nhưng khi tôi nhìn vào tệp được chia sẻ, tôi không có thành phần 'Hình ảnh' thay vì thành phần 'ItemImage'

import { ItemImage } from './Shared';

Điều này xảy ra khi bạn sao chép mã từ các dự án khác;)

Tôi có một vấn đề với React.Fragment, bởi vì phiên bản phản ứng của tôi là < 16.2, vì vậy tôi đã thoát khỏi nó.

@Balasubramani M đã cứu tôi ở đây. Muốn thêm một người nữa để giúp đỡ mọi người. Đây là vấn đề khi bạn dán quá nhiều thứ với nhau và trở nên ung dung hơn với các phiên bản. Tôi đã cập nhật một phiên bản của vật liệu-ui và cần thay đổi

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

đến đây:

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

Tôi có cùng một vấn đề và vấn đề là một số tệp js không được bao gồm trong gói của trang cụ thể đó. Hãy thử bao gồm những tập tin và vấn đề có thể được khắc phục. Tôi đã làm điều này:

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

và nó đã khắc phục vấn đề cho tôi.

Đây là khi tôi đang sử dụng React trong Dot NEt MVC

Tôi đã phát hiện ra một lý do khác cho lỗi này. Nó phải thực hiện với CSS-in-JS trả về giá trị null cho JSX cấp cao nhất của hàm trả về trong thành phần React.

Ví dụ:

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

Tôi sẽ nhận được cảnh báo này:

Cảnh báo: React.createEuity: loại không hợp lệ - dự kiến ​​một chuỗi (đối với các thành phần tích hợp) hoặc một lớp / hàm (đối với các thành phần hỗn hợp) nhưng got: null.

Tiếp theo là lỗi này:

Uncaught Error: Kiểu phần tử không hợp lệ: dự kiến ​​một chuỗi (đối với các thành phần tích hợp) hoặc một lớp / hàm (đối với các thành phần hỗn hợp) nhưng got: null.

Tôi phát hiện ra điều đó là do không có CSS ​​với thành phần CSS-in-JS mà tôi đang cố gắng kết xuất. Tôi đã sửa nó bằng cách đảm bảo có CSS ​​được trả về và không phải là giá trị null.

Ví dụ:

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

Tôi đang nhận được gần như cùng một lỗi:

Uncaught (trong lời hứa) Lỗi: Kiểu phần tử không hợp lệ: dự kiến ​​một chuỗi (đối với các thành phần tích hợp) hoặc một lớp / hàm (đối với các thành phần hỗn hợp) nhưng got: object.

Tôi đã cố gắng nhập một thành phần chức năng thuần túy từ một thư viện nút khác mà nhóm của tôi đã phát triển. Để khắc phục, tôi đã phải thay đổi thành nhập tuyệt đối (tham chiếu đường dẫn đến thành phần bên trong node_modules) từ

nhập FooBarList từ 'team-ui';

đến

nhập FooBarList từ 'team-ui / lib / thành phần / foo-bar-list / FooBarList';

Trong trường hợp của tôi, nó đã trở thành thành phần bên ngoài được nhập như thế này:

import React, { Component } from 'react';

và sau đó tuyên bố như:

export default class MyOuterComponent extends Component {

trong đó một thành phần bên trong đã nhập React trần:

import React from 'react';

và chấm vào đó để khai báo:

export default class MyInnerComponent extends ReactComponent {

Trong trường hợp của tôi, tôi đã mất rất nhiều thời gian để tìm kiếm và kiểm tra các cách có thể nhưng chỉ được sửa bằng cách này: xóa "{", "}" khi nhập thành phần tùy chỉnh:

import OrderDetail from './orderDetail';

Cách sai của tôi là:

import { OrderDetail } from './orderDetail';

Bởi vì trong tệp orderDetail.js, tôi đã xuất OrderDetail làm lớp mặc định:

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

export default OrderDetail;