Uncaught Error: Invariant Violation: Element type is invalid: verwacht een string (voor ingebouwde componenten) of een klasse/functie maar kreeg: object

Ik krijg deze foutmelding:

Ongevangen fout: invariante overtreding: elementtype is ongeldig: verwacht
een string (voor ingebouwde componenten) of een klasse/functie (voor composiet
componenten) maar kreeg: object.

Dit is mijn code:

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)

Mijn Home.jsx-bestand:

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;

Antwoord 1, autoriteit 100%

In mijn geval (met Webpack) was het het verschil tussen:

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

vs

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

De tweede werkt terwijl de eerste de fout veroorzaakt. Of het tegenovergestelde.


Antwoord 2, autoriteit 17%

u hebt standaard export nodig of required(path).default

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

Antwoord 3, autoriteit 5%

Heb je zojuist een van je React-componenten gemodulariseerd? Zo ja, dan krijgt u deze foutmelding als u bent vergeten module.exportsop te geven, bijvoorbeeld:

niet-gemodulariseerde voorheen geldige component/code:

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

gemodulariseerde component/code met module.exports:

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

Antwoord 4, autoriteit 2%

Als je deze foutmelding krijgt, kan het zijn dat je een link importeert met

import { Link } from 'react-router'

in plaats daarvan is het misschien beter om

. te gebruiken

importeer { Link } van 'react-router-dom'
           ^--------------^

Ik geloof dat dit een vereiste is voor de react router versie 4


Antwoord 5, autoriteit 2%

Laat u niet verrassen door de lijst met antwoorden op één vraag. Er zijn verschillende oorzaken voor dit probleem;

Voor mijn geval was de waarschuwing

WAARSCHUWING.JS: 33 Waarschuwing: Reagect.CreateElement: Type is ongeldig – verwacht een tekenreeks (voor ingebouwde componenten) of een klasse / functie (voor composietcomponenten) maar kreeg: undefined. U bent waarschijnlijk vergeten om uw component uit het bestand te exporteren. Controleer uw code bij index.js: 13.

gevolgd door de fout

Invariant.js: 42 Uncought Fout: Elementtype is ongeldig: verwacht een tekenreeks (voor ingebouwde componenten) of een klasse / functie (voor composietcomponenten) maar kreeg: undefined. U bent waarschijnlijk vergeten uw component uit het bestand te exporteren.

Ik kon de fout niet begrijpen omdat het geen methode of bestandsnaam vermeldt. Ik was in staat om alleen op te lossen na het bekijken van deze waarschuwing, hierboven vermeld.

Ik heb de volgende regel in de index.js.

<ConnectedRouter history={history}>

Wanneer ik googled voor de bovenstaande foutmelding met het trefwoord “Connittester” Ik vond de oplossing in een GitHub-pagina.

De fout is omdat, wanneer we react-router-reduxPackage installeren, standaard, deze installeren.
https://github.com/reactjs/react-router-redux maar niet de daadwerkelijke Bibliotheek.

Installeer het juiste pakket om deze fout op te lossen door de NPM-reikwijdte met @

op te geven

npm install [email protected]

U hoeft het verkeerd geïnstalleerde pakket niet te verwijderen. Het wordt automatisch overschreven.

Bedankt.

PS: Zelfs WAARSCHUWING Helpt u. Verwaarloos niet WAARSCHUWING Kijkend naar de -fout alleen.


6, Autoriteit 2%

https://github. com/rackt/react-router/blob/e7c6f3d848e55dda11595447928e843d39bed0eb/examples/query-params/app.js#L4
Routeris ook een van de eigenschappen van react-router.
Dus verander je modules die code als volgt vereisen:

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

Als je de ES6-syntaxis wilt gebruiken, gebruik dan de link (import), gebruik babelals helper.

BTW, om uw code te laten werken, kunnen we {this.props.children}toevoegen in de App,
leuk vinden

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

Antwoord 7, autoriteit 2%

In mijn geval retourneerde een van de geëxporteerde onderliggende modules geen juiste reactiecomponent.

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

in plaats van

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

De getoonde fout was voor de ouder, kon er dus niet achter komen.


Antwoord 8

Gezien uw fout van:

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

Je hebt 2 opties:

  1. Uw exportbestand kan het woord defaulthebben zoals in
export default class someNameHere

Dan moet je import vermijden om {}eromheen te gebruiken. Zoals in

import somethingHere from someWhereHere
  1. Vermijd het gebruik van het standaardwoord. Dan ziet je export eruit als
export class someNameHere

Dan moet je import de {}gebruiken. Vind ik leuk

import {somethingHere} from someWhereHere

Antwoord 9

In mijn geval werd dat veroorzaakt door verkeerde commentaarsymbolen. Dit is fout:

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

Dit is correct:

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

Let op de accolades


Antwoord 10

Ik heb dezelfde fout:
ERROR FIX !!!!

Ik gebruik ‘react-router-redux’v4 maar ze is slecht..
Installeer na npm [email protected]
Ik ben op “react-router-redux”: “^5.0.0-alpha.9”,

EN HET IS WERK


Antwoord 11

Ik had hetzelfde probleem en besefte dat ik een undefined reageercomponent in de JSX-markup ontving. Het ding is dat de reageercomponent om dynamisch werd berekend en het uiteindelijk ongedefinieerd was!

De fout vermeld:

Invariant-overtreding: elementtype is ongeldig: verwacht een tekenreeks (voor ingebouwde componenten) of een klasse / functie (voor composietcomponenten) maar kreeg: undefined. U bent waarschijnlijk vergeten om uw component uit het bestand te exporteren, deze wordt gedefinieerd. Controleer de rendermethode van C.,

Het voorbeeld dat deze fout produceert:

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

12

net als een snelle toevoeging hieraan. Ik had hetzelfde probleem en terwijl Webpack mijn tests compileerde en de applicatie goed liep. Toen ik mijn component in het testbestand importeerde, gebruikte ik de onjuiste zaak op een van de invoer en die dezelfde fout veroorzaakte.

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

had

moeten zijn geweest

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

Merk op dat de importnaam myComponentafhankelijk is van de naam van de export in de myComponentBestand.


13

had een soortgelijk probleem met reageer native de nieuwste versies 0,50 en hoger.

Voor mij was het een verschil tussen:

import App from './app'

en

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

(de laatste vaste het probleem). Nam me uren om deze rare te vangen, moeilijk te merken Nuance: (


14

Nog een mogelijke oplossing, die voor mij werkte:

Momenteel, react-router-reduxis in Beta en NPM retourneert 4.x, maar niet 5.x. Maar de @types/react-router-reduxTeruggestuurd 5.x. Dus er waren ongedefinieerde variabelen gebruikt.

Forcing NPM / garen om 5.x te gebruiken die het voor mij heeft opgelost.


15

In mijn geval gebeurde de import impliciet vanwege een bibliotheek.

Ik heb het erin geslaagd om het te repareren door

te wijzigen

export class Foo

Naar

export default class Foo.


16

Ik liep deze fout in toen ik een .jsx en .scss-bestand in dezelfde map had met dezelfde root-naam.

Dus bijvoorbeeld als u Component.jsxen Component.scssin dezelfde map hebt en u probeert dit te doen:

import Component from ./Component

Webpack raakt blijkbaar in de war en probeert, althans in mijn geval, het scss-bestand te importeren wanneer ik het .jsx-bestand echt wil.

Ik heb het kunnen repareren door het .scss-bestand te hernoemen en de dubbelzinnigheid te vermijden. Ik had Component.jsx ook expliciet kunnen importeren


Antwoord 17

In mijn geval gebruikte ik de standaard export, maar ik exporteerde geen functionof React.Component, maar alleen een JSX-element, dat wil zeggen

Fout:

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

Werkt :

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

Antwoord 18

En in mijn geval miste ik net een puntkomma bij de import-aangifte in een van mijn submodules.

Opgelost door dit te wijzigen:

import Splash from './Splash'

naar dit:

import Splash from './Splash';

Antwoord 19

Naast import/exportgenoemde problemen. Ik ontdekte dat het gebruik van React.cloneElement()om propstoe te voegen aan een onderliggend element en het vervolgens weer te geven dezelfde fout gaf.

Ik moest veranderen:

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

naar:

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

Zie de React.cloneElement()docsvoor meer info.


Antwoord 20

Ik kreeg deze fout in de reactieroutering, het probleem was dat ik

. gebruikte

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

maar het was een verkeerde route vereist component als klasse/functie, dus ik heb het gewijzigd in

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

en het werkte. (Vermijd gewoon de beugels rond het onderdeel)


Antwoord 21

Het probleem kan ook een alias zijn die wordt gebruikt voor een standaardexport.

Wijzigen

import { Button as ButtonTest } from "../theme/components/Button";

naar

import { default as ButtonTest } from "../theme/components/Button";

het probleem voor mij opgelost.


Antwoord 22

Voor mij was het dat mijn styled-componentswerden gedefinieerd na mijn functionele componentdefinitie. Het gebeurde alleen in enscenering en niet lokaal voor mij. Nadat ik mijn gestileerde componenten boven mijn componentdefinitie had geplaatst, verdween de fout.


Antwoord 23

Het betekent dat sommige van uw geïmporteerde componenten onjuist zijn aangegeven of niet bestaan

Ik had een soortgelijk probleem, ja

import { Image } from './Shared'

maar toen ik naar het gedeelde bestand keek, had ik geen ‘Image’-component, maar een ‘ItemImage’-component

import { ItemImage } from './Shared';

Dit gebeurt wanneer je code kopieert van andere projecten 😉


Antwoord 24

Ik had een probleem met React.Fragment, omdat de versie van mijn react < 16.2, dus ik heb het weggedaan.


Antwoord 25

Ik had hetzelfde probleem omdat ik de verkeerde bibliotheek had geïmporteerd, dus ik controleerde de documentatie van de bibliotheek en de route werd gewijzigd met de nieuwe versie, de oplossing was deze:

import {Ionicons} from '@expo/vector-icons';

en ik schreef op de verkeerde manier:

import {Ionicons} from 'expo';

Antwoord 26

@Balasubramani M heeft me hier gered. Wilde er nog een toevoegen om mensen te helpen. Dit is het probleem als je te veel dingen aan elkaar plakt en arroganter bent met versies. Ik heb een versie van material-ui bijgewerkt en moet worden gewijzigd

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

naar dit:

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

Antwoord 27

Ik had hetzelfde probleem en het probleem was dat sommige js-bestanden niet waren opgenomen in de bundeling van die specifieke pagina. Probeer die bestanden op te nemen en het probleem kan worden opgelost.
Ik deed dit:

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

en het heeft het probleem voor mij opgelost.

Dit was toen ik reageerde in Dot Net MVC


28

Ik heb een andere reden voor deze fout ontdekt. Het heeft te maken met de CSS-in-JS die een nulwaarde terugkeert naar de JSX van de retourfunctie in een reactcomponent.

Bijvoorbeeld:

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

Ik zou deze waarschuwing krijgen:

WAARSCHUWING: reageren.createElement: Type is ongeldig – verwacht een tekenreeks (voor ingebouwde componenten) of een klasse / functie (voor composietcomponenten) maar kreeg: NULL.

gevolgd door deze fout:

Niet-gevraagde fout: elementtype is ongeldig: verwacht een string (voor ingebouwde componenten) of een klasse / functie (voor composietcomponenten) maar kreeg: NULL.

Ik ontdekte dat het was omdat er geen CSS was met de CSS-in-JS-component die ik probeerde terug te geven. Ik heb het opgelost door ervoor te zorgen dat er CSS werd geretourneerd en geen nulwaarde.

Bijvoorbeeld:

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

Other episodes