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

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