javascript - Ufanget feil: Invariant brudd: Elementtype er ugyldig: forventet en streng (for innebygde komponenter) eller en klasse/funksjon, men fikk: objekt

Jeg får denne feilen:

Ufanget feil: Invariantbrudd: Elementtypen er ugyldig: forventet en streng (for innebygde komponenter) eller en klasse/funksjon (for sammensatte komponenter), men fikk: objekt.

Dette er koden min:

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)

Min Home.jsx-fil:

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;

Svar #1

I mitt tilfelle (ved bruk av Webpack) var det forskjellen mellom:

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

mot

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

Den andre fungerer mens den første forårsaker feilen. Eller det motsatte.

Svar #2

du trenger eksport standard eller require(path).default

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

Svar #3

Har du nettopp modulært gjort noen av React-komponentene dine? Hvis ja, vil du få denne feilen hvis du glemte å spesifisere module.exports, for eksempel:

ikke-modularisert tidligere gyldig komponent/kode:

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

modularisert komponent/kode med module.exports:

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

Svar #4

I mitt tilfelle returnerte en av de eksporterte undermodulene ikke en riktig React-komponent.

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

i stedet for

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

Feilen som ble vist var for forelderen, derfor kunne den ikke finne ut av det.

Svar #5

Hvis du får denne feilen, kan det være fordi du importerer lenke ved å bruke

import { Link } from 'react-router'

i stedet kan det være bedre å bruke

import { Link } from 'react-router-dom'
                      ^--------------^

Jeg tror dette er et krav for react router versjon 4

Svar #6

Gitt din feil av:

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

Du har 2 alternativer:

  1. Eksportfilen din kan ha ordet default som i
export default class someNameHere

Da må importen din unngå å bruke {} rundt den. Som i

import somethingHere from someWhereHere
  1. Unngå å bruke standardordet. Da ser eksporten din slik ut
export class someNameHere

Da må importen din bruke {}. Som

import {somethingHere} from someWhereHere

Svar #7

Ikke bli overrasket over listen av svar for ett enkelt spørsmål. Det finnes ulike årsaker til dette problemet;

For mitt tilfelle var advarselen

warning.js:33 Advarsel: React.createElement: typen er ugyldig -- forventet en streng (for innebygde komponenter) eller en klasse/funksjon (for sammensatte komponenter) men fikk: undefined. Du har sannsynligvis glemt å eksportere komponenten din fra filen den er definert i. Sjekk koden din på index.js:13.

Etterfulgt av feilen

invariant.js:42 Uopptatt feil: Elementtypen er ugyldig: forventet en streng (for innebygde komponenter) eller en klasse/funksjon (for sammensatte komponenter), men fikk: udefinert. Du har sannsynligvis glemt å eksportere komponenten din fra filen den er definert i.

Jeg kunne ikke forstå feilen siden den ikke nevner noen metode eller filnavn. Jeg klarte å løse det først etter å ha sett på denne advarselen, nevnt ovenfor.

Jeg har følgende linje i index.js.

<ConnectedRouter history={history}>

Da jeg googlet etter feilen ovenfor med søkeordet "ConnectedRouter" fant jeg løsningen på en GitHub-side.

Feilen skyldes at når vi installerer react-router-redux-pakken, installerer vi som standard denne. https://github.com/reactjs/react-router-redux, men ikke det faktiske biblioteket.

For å løse denne feilen, installer riktig pakke ved å spesifisere npm-scope med @

npm install react-router-redux@next

Du trenger ikke å fjerne pakken som er installert feil. Den vil automatisk bli overskrevet.

Takk.

PS: Selv advarsel hjelper deg. Ikke neglisjer advarsel ved kun å se på feil alene.

Svar #8

https://github.com/rackt/react-router/blob/e7c6f3d848e55dda11595447928e843d39bed0eb/examples/query-params/app.js#L4 Router er også en av egenskapene til react-router. Så endre dine modulkrav-koder slik:

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

Hvis du vil bruke ES6-syntaksen lenke bruk (import), bruk babel som hjelper.

Forresten, for å få koden din til å fungere, kan vi legge til {this.props.children} i App, slik

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

  )
}

Svar #9

I mitt tilfelle ble det forårsaket av feil kommentarsymboler. Dette er feil:

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

Dette er korrekt:

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

Merk de krøllede parentesene

Svar #10

Jeg har samme feil : FEIL FIKS !!!!

Jeg bruker 'react-router-redux' v4, men den er dårlig.. Etter npm install react-router-redux@next er jeg på "react-router-redux": "^5.0.0-alpha.9",

OG DET FUNGERER

Svar #11

Jeg fikk dette ved å gjøre import App from './app/'; og forventet at det skulle importere ./app/index.js, men det importerte i stedet ./app.json.

Svar #12

Jeg hadde det samme problemet og innså at jeg ga en Udefinert React-komponent i JSX-markeringen. Saken er at React-komponenten som skulle rendres ble beregnet dynamisk, og den endte opp med å være udefinert!

Feilen oppga:

Invariant Brudd: Elementtype er ugyldig: forventet en streng (for innebygde komponenter) eller en klasse/funksjon (for sammensatte komponenter), men fikk: udefinert. Du har sannsynligvis glemt å eksportere komponenten din fra filen den er definert i. Sjekk render-metoden til C.

Eksemplet som gir denne feilen:

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

Problemet var at en ugyldig "uiType" ble oppgitt, og derfor ga dette udefinert som resultat:

templates['InvalidString']

Relaterte artikler