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?

if you search that error, you will find more than 50 SO results, [**Link**](https://www.google.co.in/search?q=Element+type+is+invalid:+expected+a+string+(for+built-in+components)+or+a+class/function+(for+composite+components)+but+got:+undefined.+site:stackoverflow.com&rlz=1C5CHFA_enIN785IN785&sa=X&ved=0ahUKEwiespKwt5LbAhXFto8KHWUYDiEQrQIIMygEMAA&biw=1440&bih=803). so no need to add a new ques and answer :) — Mayank Shukla, May 19 '18 at 18:50
You are right. Every question have an answer somewhere in a kind of a form. I did not find quickly straightforward explanation to the exception "Error: Minified React error #130" for my case. Therefore I thought that the explanation would help someone who find himself in the same situation. — Roman, May 19 '18 at 19:07
I had this error, related to an arrow function as a JSX.Element within a class. e.g. class myClass extends Component { CustomElement = () => { return
} render() { return

} } In test and debug, nothing complains. When deployed and release, it will crash giving error above. Solution, render as follows customElement = () => { return
} Solution... render it using {this.customElement() } — Egbert Nierop, Oct 07 '21 at 08:09

Roman · Answer 1 · 2021-07-15T22:14:59.760

54

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. Some developers consider named export / import as a good practice because of the clarity and simplicity of finding a reference to the variable (class, function, etc.).

edited Jul 15 '21 at 22:14

answered May 19 '18 at 18:35

Roman

19,236
15
93
97

1

I used export default for every component and imported without curly brackets still getting this error any idea...? – smit agravat Sep 05 '22 at 15:45
is there a precise way to detect which component the error is referencing to? just getting an error stack without something we can do – irzhy Nov 14 '22 at 14:30
1

I had this same problem and changing all default exports to named exports fixed it for me as well. – okhobb Dec 08 '22 at 22:31

Error: Minified React error #130

1 Answers1

Linked