Error: Minified React error #130

Question

I have the following ReactJs component in file ./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>
    );
  }
}

Now I try to import it into ./index.js like this:

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

The console return me the error:

Error: Minified React error #130

The full text of the error you just encountered is:

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

What is wrong with that?

Answer 1

The answer is pretty simple. However it is not easy to find the problem quickly. You need to import without curly brackets in the case of export default:

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

import MyInput from './MyInput.react';

OR you may use the named export (without word default). Then you need to use curly bracket in the import:

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

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

P.S. Now, some developers consider named export / import a good practice because of the clarity and simplicity of finding a reference to the variable (class, function, etc.).