ข้อผิดพลาดที่ไม่คาดคิด: การละเมิดที่ไม่คงที่: ประเภทองค์ประกอบไม่ถูกต้อง: คาดว่าสตริง (สำหรับคอมโพเนนต์ในตัว) หรือคลาส / ฟังก์ชัน แต่ได้รับ: object

ฉันได้รับข้อผิดพลาดนี้:

ข้อผิดพลาดที่ไม่คาดคิด: การละเมิดที่ไม่คงที่: ประเภทองค์ประกอบไม่ถูกต้อง: คาดว่าสตริง (สำหรับคอมโพเนนต์ในตัว) หรือคลาส / ฟังก์ชั่น (สำหรับส่วนประกอบคอมโพสิต) แต่ได้รับ: วัตถุ

นี่คือรหัสของฉัน:

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.jsxไฟล์ของฉัน:

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;

ในกรณีของฉัน ( ใช้ Webpack ) มันเป็นความแตกต่างระหว่าง:

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

VS

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

คนที่สองทำงานในขณะที่คนแรกเป็นสาเหตุของข้อผิดพลาด หรือตรงกันข้าม

คุณต้องการส่งออกเริ่มต้นหรือต้องการ (เส้นทาง). เริ่มต้น

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

คุณเพิ่งทำส่วนประกอบส่วนประกอบของปฏิกิริยาของคุณเป็นโมดูลหรือไม่? ถ้าใช่คุณจะได้รับข้อผิดพลาดนี้หากคุณลืมระบุmodule.exportsตัวอย่างเช่น:

ไม่ใช่ส่วนประกอบ / รหัสที่ถูกต้องก่อนหน้านี้ที่ไม่ได้ทำให้เป็นโมดูล:

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

คอมโพเนนต์ / โค้ดที่ทำให้เป็นโมดูลที่มีโมดูลส่งออก :

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

หากคุณได้รับข้อผิดพลาดนี้อาจเป็นเพราะคุณกำลังนำเข้าลิงค์โดยใช้

import { Link } from 'react-router'

มันอาจจะดีกว่าที่จะใช้แทน

นำเข้า {Link} จาก ' react-router-dom '
                      ^ ^ --------------

ฉันเชื่อว่านี่เป็นข้อกำหนดสำหรับเราเตอร์ตอบสนองรุ่น 4

https://github.com/rackt/react-router/blob/e7c6f3d848e55dda11595447928e843d39bed0eb/examples/query-params/app.js#L4 ยังเป็นหนึ่งในคุณสมบัติของRouter react-routerดังนั้นเปลี่ยนโมดูลของคุณต้องการรหัสเช่นนั้น:

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

หากคุณต้องการใช้ไวยากรณ์ ES6 ที่ลิงค์ใช้ ( import) ให้ใช้babelเป็นตัวช่วย

BTW เพื่อให้รหัสของคุณใช้งานได้เราสามารถเพิ่ม{this.props.children}ในAppเช่น

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

  )
}

อย่าแปลกใจที่รายการคำตอบสำหรับคำถามเดียว มีสาเหตุหลายประการสำหรับปัญหานี้;

สำหรับกรณีของฉันคำเตือนคือ

warning.js: 33 คำเตือน: React.createElement: type ไม่ถูกต้อง - คาดว่าสตริง (สำหรับคอมโพเนนต์ในตัว) หรือคลาส / ฟังก์ชั่น (สำหรับส่วนประกอบคอมโพสิต) แต่ได้รับ: ไม่ได้กำหนด คุณอาจลืมส่งออกส่วนประกอบของคุณจากไฟล์ที่กำหนดไว้ตรวจสอบรหัสของคุณที่ index.js: 13

ตามมาด้วยข้อผิดพลาด

invariant.js: 42 ข้อผิดพลาดที่ไม่ได้แจ้ง: ประเภทองค์ประกอบไม่ถูกต้อง: คาดว่าสตริง (สำหรับองค์ประกอบในตัว) หรือคลาส / ฟังก์ชั่น (สำหรับส่วนประกอบคอมโพสิต) แต่ได้รับ: ไม่ได้กำหนด คุณอาจลืมส่งออกส่วนประกอบของคุณจากไฟล์ที่กำหนดไว้

ฉันไม่เข้าใจข้อผิดพลาดเนื่องจากไม่ได้กล่าวถึงวิธีการหรือชื่อไฟล์ ฉันสามารถแก้ไขได้หลังจากดูคำเตือนนี้ที่กล่าวถึงข้างต้น

ฉันมีบรรทัดต่อไปนี้ที่ index.js

<ConnectedRouter history={history}>

เมื่อฉันค้นหาข้อผิดพลาดด้านบนด้วยคำหลัก"ConnectedRouter"ฉันพบวิธีแก้ปัญหาในหน้า GitHub

ข้อผิดพลาดเป็นเพราะเมื่อเราติดตั้งreact-router-reduxแพคเกจโดยค่าเริ่มต้นเราติดตั้งนี้ https://github.com/reactjs/react-router-reduxแต่ไม่ใช่ไลบรารีจริง

หากต้องการแก้ไขข้อผิดพลาดนี้ให้ติดตั้งแพ็กเกจที่เหมาะสมโดยระบุขอบเขต npm ด้วย @

npm install react-router-redux@next

คุณไม่จำเป็นต้องลบแพ็คเกจที่ติดตั้งผิด มันจะถูกเขียนทับโดยอัตโนมัติ

ขอบคุณ.

PS: แม้คำเตือนจะช่วยคุณ อย่าเพิกเฉยต่อการเตือนเพียงแค่ดูข้อผิดพลาดเพียงอย่างเดียว

ในกรณีของฉันหนึ่งในโมดูลลูกที่ส่งออกไม่ได้ส่งคืนองค์ประกอบตอบสนองที่เหมาะสม

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

แทน

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

ข้อผิดพลาดที่แสดงเป็นของผู้ปกครองดังนั้นจึงไม่สามารถคิดออกได้

ในกรณีของฉันที่เกิดจากสัญลักษณ์แสดงความคิดเห็นผิด นี่เป็นสิ่งที่ผิด:

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

สิ่งนี้ถูกต้อง:

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

สังเกตเห็นวงเล็บปีกกา

ฉันมีข้อผิดพลาดเดียวกัน: ข้อผิดพลาดแก้ไข !!!!

ฉันใช้'react-router-redux' v4 แต่เธอไม่ดี .. หลังจากติดตั้งreact-router-redux @ ต่อไป ฉันอยู่ที่ "react-router-redux": "^ 5.0.0-alpha.9",

และมันก็เป็นงาน

ผมได้รับนี้โดยการทำimport App from './app/';คาดหวังว่ามันจะนำเข้าแต่มันนำเข้าแทน./app/index.js./app.json

ฉันมีปัญหาเดียวกันและรู้ว่าฉันกำลังให้ส่วนประกอบ React ที่ไม่ได้กำหนดไว้ในมาร์กอัป JSX สิ่งนี้คือองค์ประกอบตอบสนองต่อการแสดงผลถูกคำนวณแบบไดนามิกและสิ้นสุดลงด้วยการไม่ได้กำหนด!

ข้อผิดพลาดที่ระบุ:

การละเมิดที่ไม่คงที่: ประเภทองค์ประกอบไม่ถูกต้อง: คาดว่าสตริง (สำหรับคอมโพเนนต์ในตัว) หรือคลาส / ฟังก์ชัน (สำหรับส่วนประกอบคอมโพสิต) แต่ได้รับ: ไม่ได้กำหนด คุณอาจลืมส่งออกส่วนประกอบของคุณจากไฟล์ที่กำหนดไว้ตรวจสอบวิธีการแสดงผลของC,

ตัวอย่างการผลิตข้อผิดพลาดนี้:

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

ปัญหาคือมีการระบุ "uiType" ที่ไม่ถูกต้องดังนั้นสิ่งนี้จึงสร้างไม่ได้กำหนดเป็นผล:

templates['InvalidString']

เช่นเดียวกับการเพิ่มอย่างรวดเร็วนี้ ฉันมีปัญหาเดียวกันและในขณะที่ Webpack รวบรวมการทดสอบของฉันและแอปพลิเคชันทำงานได้ดี เมื่อฉันนำเข้าส่วนประกอบของฉันลงในไฟล์ทดสอบฉันใช้เคสที่ไม่ถูกต้องกับการนำเข้าหนึ่งรายการและนั่นเป็นสาเหตุของข้อผิดพลาดเดียวกัน

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

ควรได้รับ

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

โปรดทราบว่าชื่อการนำเข้าmyComponentขึ้นอยู่กับชื่อของการส่งออกภายในMyComponentไฟล์

มีปัญหาที่คล้ายกันกับ React Native เวอร์ชันล่าสุด 0.50 ขึ้นไป

สำหรับฉันมันเป็นความแตกต่างระหว่าง:

import App from './app'

และ

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

(หลังแก้ไขปัญหา) ใช้เวลาหลายชั่วโมงในการจับสิ่งแปลกประหลาดนี้ยากที่จะสังเกตเห็นความแตกต่างเล็กน้อย :(

อีกวิธีแก้ปัญหาที่เป็นไปได้ที่ทำงานสำหรับฉัน:

ปัจจุบันreact-router-reduxอยู่ในรุ่นเบต้าและ npm ส่งคืนค่า 4.x แต่ไม่ใช่ 5.x แต่@types/react-router-reduxกลับมา 5.x ดังนั้นจึงมีการใช้ตัวแปรที่ไม่ได้กำหนด

บังคับให้ NPM / Yarn ใช้ 5.x แก้ไขให้ฉัน

ได้รับข้อผิดพลาดของคุณจาก:

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

คุณมี 2 ตัวเลือก:

1. ไฟล์การส่งออกของคุณสามารถมีคำdefaultในขณะที่export default class ____.... จากนั้นนำเข้าของคุณจะต้องหลีกเลี่ยงการใช้{}รอบ ๆ เช่นเดียวกับในimport ____ from ____

2. หลีกเลี่ยงการใช้คำเริ่มต้น จากนั้นการส่งออกจะมีลักษณะเช่นนั้นการนำเข้าของคุณต้องใช้export class ____... {}ชอบimport {____} from ____

ในกรณีของฉันการนำเข้าเกิดขึ้นโดยปริยายเนื่องจากห้องสมุด

ฉันจัดการเพื่อแก้ไขโดยการเปลี่ยน

export class Foo

ถึง

export default class Foo.

ฉันพบข้อผิดพลาดนี้เมื่อฉันมีไฟล์. jsx และ. scss ในไดเรกทอรีเดียวกันที่มีชื่อรูทเหมือนกัน

ตัวอย่างเช่นถ้าคุณมีComponent.jsxและComponent.scssอยู่ในโฟลเดอร์เดียวกันและคุณลองทำสิ่งนี้:

import Component from ./Component

เห็นได้ชัดว่า Webpack สับสนและอย่างน้อยก็ในกรณีของฉันพยายามนำเข้าไฟล์ scss เมื่อฉันต้องการไฟล์. jsx

ฉันสามารถแก้ไขได้โดยเปลี่ยนชื่อไฟล์. ssss และหลีกเลี่ยงความคลุมเครือ ฉันสามารถนำเข้า Component.jsx ได้อย่างชัดเจนด้วย

และในกรณีของฉันฉันเพิ่งหายเซมิโคลอนที่การนำเข้า decleration ในหนึ่งในโมดูลย่อยของฉัน

แก้ไขโดยเปลี่ยนสิ่งนี้

import Splash from './Splash'

สำหรับสิ่งนี้:

import Splash from './Splash';

ในกรณีของฉันฉันใช้การส่งออกเริ่มต้น แต่ไม่ส่งออกfunctionหรือReact.Componentแต่เป็นJSXองค์ประกอบเช่น

ข้อผิดพลาด:

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

ผลงาน:

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

นอกเหนือจากimport/ exportประเด็นที่กล่าวถึง ฉันพบว่าการใช้React.cloneElement()เพิ่มpropsองค์ประกอบย่อยแล้วแสดงผลมันทำให้ฉันมีข้อผิดพลาดเดียวกันนี้

ฉันต้องเปลี่ยน:

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

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

ถึง:

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

ดูReact.cloneElement() เอกสารสำหรับข้อมูลเพิ่มเติม

ฉันได้รับข้อผิดพลาดนี้ในการกำหนดเส้นทางการตอบสนองปัญหาคือว่าฉันกำลังใช้

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

แต่มันผิดเส้นทางต้องใช้องค์ประกอบเป็นคลาส / ฟังก์ชั่นดังนั้นฉันเปลี่ยนมันเป็น

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

และมันก็ใช้งานได้ (เพียงหลีกเลี่ยงการจัดฟันรอบองค์ประกอบ)

สำหรับฉันมันเป็นสิ่งที่องค์ประกอบสไตล์ของฉันถูกกำหนดหลังจากนิยามองค์ประกอบการทำงานของฉัน มันเกิดขึ้นเฉพาะในการจัดเตรียมไม่ใช่สำหรับฉันเท่านั้น เมื่อฉันย้ายส่วนประกอบที่มีสไตล์ของฉันด้านบนคำจำกัดความองค์ประกอบของฉันข้อผิดพลาดก็หายไป

หมายความว่าคอมโพเนนต์ที่นำเข้าของคุณบางรายการมีการประกาศผิดพลาดหรือไม่มีอยู่

ฉันมีปัญหาที่คล้ายกันฉันทำ

import { Image } from './Shared'

แต่เมื่อฉันดูในไฟล์ที่แชร์ฉันไม่มีองค์ประกอบ 'รูปภาพ' แทนที่จะเป็นคอมโพเนนต์ 'ItemImage'

import { ItemImage } from './Shared';

สิ่งนี้จะเกิดขึ้นเมื่อคุณคัดลอกโค้ดจากโครงการอื่น;)

ฉันมีปัญหากับReact.Fragmentเพราะเวอร์ชันของปฏิกิริยาของฉันเป็น< 16.2ดังนั้นฉันจึงกำจัดมัน

@Balasubramani M บันทึกฉันไว้ที่นี่ ต้องการเพิ่มอีกหนึ่งรายการเพื่อช่วยเหลือผู้คน นี่เป็นปัญหาเมื่อคุณติดกาวหลายอย่างเข้าด้วยกันและเป็นนักรบรุ่นใหม่ ฉันอัปเดตเวอร์ชันของวัสดุ UI และจำเป็นต้องเปลี่ยน

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

สำหรับสิ่งนี้:

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

ฉันมีปัญหาเดียวกันและปัญหาคือไฟล์ js บางไฟล์ไม่ได้รวมอยู่ในชุดข้อมูลของหน้านั้น ลองรวมไฟล์เหล่านั้นและปัญหาอาจได้รับการแก้ไข ฉันทำอย่างนี้:

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

และแก้ไขปัญหาให้ฉัน

นี่คือขณะที่ฉันกำลังใช้ React ใน Dot NEt MVC

ฉันค้นพบอีกสาเหตุหนึ่งสำหรับข้อผิดพลาดนี้ มันเกี่ยวข้องกับ CSS-in-JS ที่ส่งคืนค่า Null ไปยัง JSX ระดับบนสุดของฟังก์ชั่นการส่งคืนในส่วนประกอบ React

ตัวอย่างเช่น:

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

ฉันจะได้รับคำเตือนนี้:

คำเตือน: React.createElement: type ไม่ถูกต้อง - คาดว่าสตริง (สำหรับคอมโพเนนต์ในตัว) หรือคลาส / ฟังก์ชั่น (สำหรับส่วนประกอบคอมโพสิต) แต่ได้รับ: null

ตามด้วยข้อผิดพลาดนี้:

ข้อผิดพลาดที่ไม่คาดคิด: ประเภทองค์ประกอบไม่ถูกต้อง: คาดว่าจะเป็นสตริง (สำหรับองค์ประกอบในตัว) หรือคลาส / ฟังก์ชั่น (สำหรับส่วนประกอบคอมโพสิต) แต่ได้รับ: เป็นโมฆะ

ฉันค้นพบว่าเป็นเพราะไม่มี CSS ที่มีคอมโพเนนต์ CSS-in-JS ที่ฉันพยายามแสดงผล ฉันแก้ไขโดยทำให้แน่ใจว่ามีการส่งคืน CSS และไม่ใช่ค่า Null

ตัวอย่างเช่น:

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

ฉันได้รับข้อผิดพลาดเกือบเหมือนกัน:

ข้อผิดพลาด Uncaught (ตามสัญญา): ประเภทองค์ประกอบไม่ถูกต้อง: คาดว่าสตริง (สำหรับคอมโพเนนต์ในตัว) หรือคลาส / ฟังก์ชั่น (สำหรับส่วนประกอบคอมโพสิต) แต่ได้รับ: object

ฉันพยายามที่จะนำเข้าส่วนประกอบการทำงานที่บริสุทธิ์จากห้องสมุดโหนดอื่นทีมของฉันได้พัฒนา เพื่อแก้ไขฉันต้องเปลี่ยนเป็นการนำเข้าแบบสัมบูรณ์ (อ้างอิงเส้นทางไปยังส่วนประกอบภายในnode_modules) จาก

นำเข้า FooBarList จาก 'team-ui';

ถึง

นำเข้า FooBarList จาก 'team-ui / lib / components / foo-bar-list / FooBarList';

ในกรณีของฉันมันเป็นส่วนประกอบภายนอกที่นำเข้าเช่นนี้

import React, { Component } from 'react';

แล้วประกาศเช่น:

export default class MyOuterComponent extends Component {

โดยที่ส่วนประกอบภายในนำเข้า React bare:

import React from 'react';

และจุดลงในนั้นสำหรับการประกาศ:

export default class MyInnerComponent extends ReactComponent {

ในกรณีของฉันฉันใช้เวลาในการค้นหาและตรวจสอบอาจใช้เวลา แต่วิธีนี้ได้รับการแก้ไขด้วยวิธีนี้: ลบ "{", "}" เมื่อนำเข้าองค์ประกอบที่กำหนดเอง:

import OrderDetail from './orderDetail';

วิธีที่ผิดของฉันคือ:

import { OrderDetail } from './orderDetail';

เพราะในไฟล์ orderDetail.js ฉันส่งออก OrderDetail เป็นคลาสเริ่มต้น:

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

export default OrderDetail;