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?
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.
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.
You need to import without curly brackets in the case of export default: export default class MyInput extends React. Component { ... } import MyInput from './MyInput.
#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.
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.).
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With