Mixing
React.createElement: type is invalid — expected a string but got: undefined
0
I'm developing Server side rendered react.js application.I'm using reduxForm for signup component.
but i'm getting bellow error in console
Warning: React.createElement: type is invalid -- expected a string
(for built-in components) or a class/function (for composite
components) but got: undefined. You likely forgot to export your
component from the file it's defined in, or you might have mixed up
default and named imports.
"react-redux": "^5.0.7",
"react-router": "^4.3.1",
"redux-form": "^7.4.2"
import React, { Component } from 'react';
import { connect } from "react-redux";
import { Field, reduxForm } from "redux-form";
class SignUpForm extends Component {
constructor(props) {
super(props);
this.renderField = this.renderField.bind(this);
}
renderField(field) {
const { meta: { touched, error } } = field;
const className = `form-group ${touched && error ? "has-danger" : ""}`;
return (
<div className={className}>
<label>{field.label}</label>
<input className="form-control" type={field.type || "text"} {...field.input} />
<div className="text-help">
{touched ? error : ""}
</div>
</div>
);
}
render() {
const { handleSubmit } = this.props;
return (
<form >
<Field
label="Mobile Number"
name="mobilenumber"
component={this.renderField}
/>
<button type="submit" className="btn btn-primary btn-play">OK</button>
</form>
);
}
}
function mapDispatchToProps(dispatch) {
return bindActionCreators({ signup }, dispatch);
}
export default reduxForm({
validate,
form: "SignUpForm"
})(connect(null, mapDispatchToProps)(SignUpForm));
javascript reactjs redux redux-form
asked Jan 2 at 9:55
Tje123Tje123
136314
|
show 1 more comment
0
I'm developing Server side rendered react.js application.I'm using reduxForm for signup component.
but i'm getting bellow error in console
Warning: React.createElement: type is invalid -- expected a string
(for built-in components) or a class/function (for composite
components) but got: undefined. You likely forgot to export your
component from the file it's defined in, or you might have mixed up
default and named imports.
"react-redux": "^5.0.7",
"react-router": "^4.3.1",
"redux-form": "^7.4.2"
import React, { Component } from 'react';
import { connect } from "react-redux";
import { Field, reduxForm } from "redux-form";
class SignUpForm extends Component {
constructor(props) {
super(props);
this.renderField = this.renderField.bind(this);
}
renderField(field) {
const { meta: { touched, error } } = field;
const className = `form-group ${touched && error ? "has-danger" : ""}`;
return (
<div className={className}>
<label>{field.label}</label>
<input className="form-control" type={field.type || "text"} {...field.input} />
<div className="text-help">
{touched ? error : ""}
</div>
</div>
);
}
render() {
const { handleSubmit } = this.props;
return (
<form >
<Field
label="Mobile Number"
name="mobilenumber"
component={this.renderField}
/>
<button type="submit" className="btn btn-primary btn-play">OK</button>
</form>
);
}
}
function mapDispatchToProps(dispatch) {
return bindActionCreators({ signup }, dispatch);
}
export default reduxForm({
validate,
form: "SignUpForm"
})(connect(null, mapDispatchToProps)(SignUpForm));
javascript reactjs redux redux-form
asked Jan 2 at 9:55
Tje123Tje123
136314
Is it all the code from your file? Are you sure you do export all your components in the right way?
– Pietro
Jan 2 at 10:58
@Pietro yes.this is full code
– Tje123
Jan 2 at 11:11
@R.B removed bind from constructor,but same error
– Tje123
Jan 2 at 11:18
@Tje123 can you try convert your export to this? export default connect(null, mapDispatchToProps)(reduxForm({ form: 'SignUpForm', validate })(SignUpForm));
– Roy.B
Jan 2 at 11:46
@R.B tried it.but same error.then i export like thisexport default reduxForm({ validate, form: "SignUpForm" })({ component: connect(null, mapDispatchToProps)(SignUpForm) });. then got this errorField must be inside a component decorated with reduxForm()
– Tje123
Jan 3 at 4:27
|
show 1 more comment
0
0
0
I'm developing Server side rendered react.js application.I'm using reduxForm for signup component.
but i'm getting bellow error in console
Warning: React.createElement: type is invalid -- expected a string
(for built-in components) or a class/function (for composite
components) but got: undefined. You likely forgot to export your
component from the file it's defined in, or you might have mixed up
default and named imports.
"react-redux": "^5.0.7",
"react-router": "^4.3.1",
"redux-form": "^7.4.2"
import React, { Component } from 'react';
import { connect } from "react-redux";
import { Field, reduxForm } from "redux-form";
class SignUpForm extends Component {
constructor(props) {
super(props);
this.renderField = this.renderField.bind(this);
}
renderField(field) {
const { meta: { touched, error } } = field;
const className = `form-group ${touched && error ? "has-danger" : ""}`;
return (
<div className={className}>
<label>{field.label}</label>
<input className="form-control" type={field.type || "text"} {...field.input} />
<div className="text-help">
{touched ? error : ""}
</div>
</div>
);
}
render() {
const { handleSubmit } = this.props;
return (
<form >
<Field
label="Mobile Number"
name="mobilenumber"
component={this.renderField}
/>
<button type="submit" className="btn btn-primary btn-play">OK</button>
</form>
);
}
}
function mapDispatchToProps(dispatch) {
return bindActionCreators({ signup }, dispatch);
}
export default reduxForm({
validate,
form: "SignUpForm"
})(connect(null, mapDispatchToProps)(SignUpForm));
javascript reactjs redux redux-form
asked Jan 2 at 9:55
Tje123Tje123
136314
I'm developing Server side rendered react.js application.I'm using reduxForm for signup component.
but i'm getting bellow error in console
Warning: React.createElement: type is invalid -- expected a string
(for built-in components) or a class/function (for composite
components) but got: undefined. You likely forgot to export your
component from the file it's defined in, or you might have mixed up
default and named imports.
"react-redux": "^5.0.7",
"react-router": "^4.3.1",
"redux-form": "^7.4.2"
import React, { Component } from 'react';
import { connect } from "react-redux";
import { Field, reduxForm } from "redux-form";
class SignUpForm extends Component {
constructor(props) {
super(props);
this.renderField = this.renderField.bind(this);
}
renderField(field) {
const { meta: { touched, error } } = field;
const className = `form-group ${touched && error ? "has-danger" : ""}`;
return (
<div className={className}>
<label>{field.label}</label>
<input className="form-control" type={field.type || "text"} {...field.input} />
<div className="text-help">
{touched ? error : ""}
</div>
</div>
);
}
render() {
const { handleSubmit } = this.props;
return (
<form >
<Field
label="Mobile Number"
name="mobilenumber"
component={this.renderField}
/>
<button type="submit" className="btn btn-primary btn-play">OK</button>
</form>
);
}
}
function mapDispatchToProps(dispatch) {
return bindActionCreators({ signup }, dispatch);
}
export default reduxForm({
validate,
form: "SignUpForm"
})(connect(null, mapDispatchToProps)(SignUpForm));
javascript reactjs redux redux-form
javascript reactjs redux redux-form
asked Jan 2 at 9:55
Tje123Tje123
136314
asked Jan 2 at 9:55
Tje123Tje123
136314
edited Jan 2 at 11:03
Tje123
asked Jan 2 at 9:55
Tje123Tje123
136314
asked Jan 2 at 9:55
Tje123Tje123
136314
asked Jan 2 at 9:55
Tje123Tje123
136314
136314
Is it all the code from your file? Are you sure you do export all your components in the right way?
– Pietro
Jan 2 at 10:58
@Pietro yes.this is full code
– Tje123
Jan 2 at 11:11
@R.B removed bind from constructor,but same error
– Tje123
Jan 2 at 11:18
@Tje123 can you try convert your export to this? export default connect(null, mapDispatchToProps)(reduxForm({ form: 'SignUpForm', validate })(SignUpForm));
– Roy.B
Jan 2 at 11:46
@R.B tried it.but same error.then i export like thisexport default reduxForm({ validate, form: "SignUpForm" })({ component: connect(null, mapDispatchToProps)(SignUpForm) });. then got this errorField must be inside a component decorated with reduxForm()
– Tje123
Jan 3 at 4:27
|
show 1 more comment
Is it all the code from your file? Are you sure you do export all your components in the right way?
– Pietro
Jan 2 at 10:58
@Pietro yes.this is full code
– Tje123
Jan 2 at 11:11
@R.B removed bind from constructor,but same error
– Tje123
Jan 2 at 11:18
@Tje123 can you try convert your export to this? export default connect(null, mapDispatchToProps)(reduxForm({ form: 'SignUpForm', validate })(SignUpForm));
– Roy.B
Jan 2 at 11:46
@R.B tried it.but same error.then i export like thisexport default reduxForm({ validate, form: "SignUpForm" })({ component: connect(null, mapDispatchToProps)(SignUpForm) });. then got this errorField must be inside a component decorated with reduxForm()
– Tje123
Jan 3 at 4:27
Is it all the code from your file? Are you sure you do export all your components in the right way?
– Pietro
Jan 2 at 10:58
Is it all the code from your file? Are you sure you do export all your components in the right way?
– Pietro
Jan 2 at 10:58
@Pietro yes.this is full code
– Tje123
Jan 2 at 11:11
@Pietro yes.this is full code
– Tje123
Jan 2 at 11:11
@R.B removed bind from constructor,but same error
– Tje123
Jan 2 at 11:18
@R.B removed bind from constructor,but same error
– Tje123
Jan 2 at 11:18
@Tje123 can you try convert your export to this? export default connect(null, mapDispatchToProps)(reduxForm({ form: 'SignUpForm', validate })(SignUpForm));
– Roy.B
Jan 2 at 11:46
@Tje123 can you try convert your export to this? export default connect(null, mapDispatchToProps)(reduxForm({ form: 'SignUpForm', validate })(SignUpForm));
– Roy.B
Jan 2 at 11:46
@R.B tried it.but same error.then i export like this
export default reduxForm({ validate, form: "SignUpForm" })({ component: connect(null, mapDispatchToProps)(SignUpForm) }); . then got this error Field must be inside a component decorated with reduxForm()– Tje123
Jan 3 at 4:27
@R.B tried it.but same error.then i export like this
export default reduxForm({ validate, form: "SignUpForm" })({ component: connect(null, mapDispatchToProps)(SignUpForm) }); . then got this error Field must be inside a component decorated with reduxForm()– Tje123
Jan 3 at 4:27
|
show 1 more comment
0
active
oldest
votes
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f54004250%2freact-createelement-type-is-invalid-expected-a-string-but-got-undefined%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
0
active
oldest
votes
0
active
oldest
votes
active
oldest
votes
active
oldest
votes
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f54004250%2freact-createelement-type-is-invalid-expected-a-string-but-got-undefined%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Is it all the code from your file? Are you sure you do export all your components in the right way?
– Pietro
Jan 2 at 10:58
@Pietro yes.this is full code
– Tje123
Jan 2 at 11:11
@R.B removed bind from constructor,but same error
– Tje123
Jan 2 at 11:18
@Tje123 can you try convert your export to this? export default connect(null, mapDispatchToProps)(reduxForm({ form: 'SignUpForm', validate })(SignUpForm));
– Roy.B
Jan 2 at 11:46
@R.B tried it.but same error.then i export like this
export default reduxForm({ validate, form: "SignUpForm" })({ component: connect(null, mapDispatchToProps)(SignUpForm) });. then got this errorField must be inside a component decorated with reduxForm()– Tje123
Jan 3 at 4:27