I am trying to add a search bar within a navbar using react-bulma-components, but I get this error:
Error: Element 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.
Check the render method of TopNav.
I don't get the error when I exclude the Navbar.Item containing a Field element. The following is my code:
<Navbar>
<Navbar.Brand>
<Navbar.Item renderAs="a" href="/">
The Nomad
</Navbar.Item>
<Navbar.Burger>
</Navbar.Burger>
</Navbar.Brand>
<Navbar.Item>
<Field>
<Control>
<Input placeholder="Search" />
</Control>
</Field>
</Navbar.Item>
</Navbar>
Any help is much appreciated!
I managed to figure this out on my own. It turns out that Field, Control and Input are properties of the Form component. I had the following in my import statements (incorrect version):
import React from 'react';
import { Navbar } from 'react-bulma-components';
import { Field, Control, Input } from 'react-bulma-components';
What I should have had was this:
import React from 'react';
import { Navbar } from 'react-bulma-components';
import { Form } from 'react-bulma-components';
const { Field, Control, Input } = Form;
Related
Issue:
I have a component that should redirect users to a new page on click. I want to use Next's <Link> component to take care of the route change.
However, I've noticed that the Link component refuses to render if any of its children are not standard HTML elements (e.g., <div>, <a>, ...).
In the example below, the component I want to render is an icon from the heroicons library.
MyPage.js
import Link from 'next/link'
import { ArrowSmRightIcon } from 'heroicons-react'
export default function MyPage() {
return(
<Link href='/targetPage'>
<ArrowSmRightIcon />
</Link>
)
}
Running the above renders the following error:
Error: Element type is invalid: expected a string (for built-in
components) or a class/function (for composite components) but got:
undefined.
Attempted solution:
I've found some advice online about having to create a custom component that using forwardRef. I've implemented my custom component as:
IconLink.js
import NextLink from 'next/link'
import { forwardRef } from "react";
import { ArrowSmRightIcon } from 'heroicons-react'
const IconLink = forwardRef(({ href, prefetch, replace, scroll, shallow, locale, ...props }, ref) => {
return(
<NextLink
href={href}
replace={replace}
scroll={scroll}
shallow={shallow}
locale={locale}
passHref
>
<ArrowSmRightIcon ref={ref} {...props} />
</NextLink>
)
})
export default IconLink
MyPage.js
import IconLink from './IconLink';
export default function MyPage() {
return(
<IconLink
passHref
href='/targetPage'
/>
)
}
However, I still get the same error.
What should I do render a custom child component inside Next's <Link> component?
The problem is not from the next/link, the problem is from the import, This error indicates that there is no named export "ArrowSmRightIcon" in the package heroicons-react I believe what you're looking for is ArrowSmRight
import { ArrowSmRight } from 'heroicons-react'
Plus the package is deprecated as stated by the maintainers:
This package has been deprecated
Author message:
Official Heroicons V1 released. Please use the following for future >
projects: https://www.npmjs.com/package/#heroicons/react
the currently maintained version is:
https://www.npmjs.com/package/#heroicons/react
I'm trying to use semantic UI for React with its modal.
Dropdown is ok but modal can't load :
import {DropDown} from "semantic-ui-react";
import {Modal} from "semantic-ui-react";
export default class Builder extends Component {
render(){
return(
<DropDown/>
<Modal/>
)
}
}
The console is returning this error :
app.js:547 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.
Check the render method of `Portal`.
I have already tried like this :
import Modal from "semantic-ui-react";
And as I saw, Modal folder is at the same level as the Dropdown in my packages.
Any help would be welcome!
Thanks
I think the solution to your problem is either of the following:
You forgot to import import React, { Component } from "react";
The structure of your code. You must wrap both JSX elements in an enclosing tag as they are adjacent. It should be like this:
<div>
<Dropdown/>
<Modal/>
</div>
You don't have to separate import two components as they are both in semantic-ui-react library.
Hope this helps
I'm getting an error whenever I try to render a Field from Redux-form-material-ui. This is my form code:
import React, { Component } from 'react';
import { Field, reduxForm } from 'redux-form';
import { TextField, DatePicker, SelectField } from 'redux-form-material-ui';
class InputForm extends Component {
render() {
return(
<form>
<div>
<Field name="eventDate" component={DatePicker} format={null} hintText="What day is the event?"/>
</div>
</form>
)
}
}
InputForm = reduxForm({
form: 'contact'
})(InputForm);
export default InputForm;
The error that I'm getting is this one:
Element 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.
Check the render method of ConnectedField.
I know it has to do with the component={ DatePicker } assigned on the Field element because if I change it to TextFIeld it renders okey.
I found out that DatePicker hasnt been implemented(do not know why) on the new release of redux-form-material-ui#next. So this has been solved.
I'm testing some React app with Material-UI, I have this error:
Component definition is missing display name
import React from 'react';
import TextField from 'material-ui/TextField';
import PageBase from '../components/PageBase';
const FormPageError = () => { //HERE'S THE WARNING
return(
<PageBase title="Formulario con validaciones"
navigation="Application / Formulario Error">
<form>
<TextField
hintText="Escriba su nombre"
errorText="Requerido"
/>
</form>
</PageBase>
);
};
export default FormPageError;
With that error, I'm having this in the 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.
What I have to do? thanks
EDIT: I edited the code thanks to the comments below, but I still getting the same warnings:
I have tried several times to use the <Form> and <FormControl> components. Everytime I use I keep getting same erros:
"warning.js?8a56:45 Warning: React.createElement: type should not be
null, undefined, boolean, or number. It should be a string (for DOM
elements) or a ReactClass (for composite components). Check the render
method of App."
"Uncaught Invariant Violation: Element type is invalid: expected a
string (for built-in components) or a class/function (for composite
components) but got: undefined. Check the render method of App."
Even with this basic example:
import React, {Component} from 'react';
import {FormControl, FormGroup, ControlLabel, HelpBlock, Checkbox, Radio, Button} from 'react-bootstrap';
export default class App extends Component {
render() {
return (
<form>
<FormGroup controlId="formControlsText">
<ControlLabel>Text</ControlLabel>
<FormControl type="text" placeholder="Enter text" />
</FormGroup>
<Button type="submit">
Submit
</Button>
</form>
);
}
}
Any ideas?
Update the npm-package those components are new in react-bootstrap.
Import your React-Bootstrap components like this:
import FormControl from 'react-bootstrap/lib/FormControl';
That helped me to get rid of the same error when using react-bootstrap 0.31.
I had a somewhat related issue and discovered they removed ControlLabel replacing it with FormLabel in more recent versions.
Change
import {FormControl, FormGroup, ControlLabel, etc... } from 'react-bootstrap';
To
import {FormControl, FormGroup, FormLabel, etc... } from 'react-bootstrap';