Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Error: Minified React error #130 [duplicate]

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?

like image 396
Roman Avatar asked May 19 '18 18:05

Roman


People also ask

What is Minified error in React?

In the minified production build of React, we avoid sending down full error messages in order to reduce the number of bytes sent over the wire.

What is Minified React error 130?

The calendar does not render and throws the Minified React error #130, which equates to: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.

How do you solve a Minified React Error #130?

You need to import without curly brackets in the case of export default: export default class MyInput extends React. Component { ... } import MyInput from './MyInput.

What is Minified React Error #185?

#185 text: Maximum update depth exceeded. This can happen when a component repeatedly calls setState inside componentWillUpdate or componentDidUpdate. React limits the number of nested updates to prevent infinite loops.


1 Answers

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.).

like image 190
Roman Avatar answered Oct 03 '22 10:10

Roman