web-dev-qa-db-fra.com

Erreur: Minified React error # 130

J'ai le composant ReactJs suivant dans le fichier ./MyInput.react.js

import React from 'react';

export default class MyInput extends React.Component {
  constructor(props) {
    super(props);
    this.id = getNextId();

    this.onChange = this.onChange.bind(this);
  }
  onChange(e) {
    this.props.onChange(e.target.value);
  }
  render() {
    return (
      <label htmlFor={this.id}>
        {this.props.label}      
        <input
          id={this.id}
          value={this.props.value} 
          onChange={this.onChange}
          />
      </label>
    );
  }
}

Maintenant, j'essaie de l'importer dans ./index.js comme ceci:

import {MyInput} from './MyInput.react';

La console me renvoie l'erreur:

Error: Minified React error #130

Le texte complet de l'erreur que vous venez de rencontrer est:

Element type is invalid: expected a string (for built-in components) or 
a class/function (for composite components) but got: undefined.

Quel est le problème avec ça?

reactjsecmascript-6es6-class
6
Roman

La réponse est plutôt simple. Cependant, il n'est pas facile de trouver le problème rapidement. Vous devez importer sans accolades dans le cas d'une exportation par défaut:

export default class MyInput extends React.Component {
  ...
}

import MyInput from './MyInput.react';

OU vous pouvez utiliser l'exportation nommée (sans Word par défaut). Ensuite, vous devez utiliser des accolades dans l'importation:

export class MyInput extends React.Component {
  ...
}

import {MyInput} from './MyInput.react';

P.S. Maintenant, certains développeurs considèrent l'export/import nommé comme une bonne pratique en raison de la clarté et de la simplicité de la recherche d'une référence à la variable (classe, fonction, etc.).

15
Roman