I followed the Input.Search example here https://ant.design/components/input/
import { Input } from 'antd';
const Search = Input.Search;
ReactDOM.render(
<Search placeholder="input search text" onSearch={value => console.log(value)} />
, mountNode);
I got the following error:
Uncaught Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined
Any idea why?
It works just fine if I used the <Input .../> component. Why does <Input.Search .../> break?
Input.Search is imported after antd#2.5.0, see: https://ant.design/changelog#2.5.0
To import Search from ant design Input your code is wrong.
The correct syntax to Import Search is Given below:-
const {Search} = Input;
Related
I started getting the error:
error - Error: Element type is invalid: expected a string (for built-in components) or
a class/function (for composite components) but got: object.
at ReactDOMServerRenderer.render ...
when adding TypeScript support to my NextJS project.
I searched for similar questions but the answers were mostly about wrong import/export.
But in my case it seems to be other than that.
I also get a warning before this error:
Warning: React.jsx: type is invalid -- expected a string (for built-in components) or
a class/function (for composite components) but got: object.
Check your code at _app.js:18.
at App (webpack-internal:///./pages/_app.js:19:16)
This is my _app.js:
import "../styles/global.scss";
import "video.js/dist/video-js.css";
import { RecoilRoot } from "recoil";
import RecoilNexus from "recoil-nexus";
import { CookiesProvider } from "react-cookie";
import Head from "next/head";
export default function App({ Component, pageProps }) {
return (
<>
<Head>
<meta name="theme-color" content="#fff" />
<meta name="viewport" content="initial-scale=1, width=device-width" />
</Head>
<CookiesProvider>
<RecoilRoot>
<RecoilNexus />
<Component {...pageProps} />
</RecoilRoot>
</CookiesProvider>
</>
);
}
So the error was being generated because of the <RecoilNexus /> part.
I tried commenting it and the error was gone. However, I still need to use it in my project.
Just changing my _app.js file's extension to _app.tsx fixed the problem. I'm still not sure why this has happened and if this problem only exists when using recoil-nexus and adding TS to the NextJS project or it's something you have to do when adding TS to an existing project.
I'd be happy to know more about the reason for this
I know this is a common error but I couldn't find an answer that was relevant for my situation.
I have two files nested together in a folder; one is a parent functional component, one is a child functional component.
The parent file is importing and structured like this
.....
import NavigationIcon from "./NavigationIcon";
const NavigationIcons = () => {
return (
<IconContext.Consumer>
{(icons) => (
<View>
{icons.map((icon) => (
js:12 <NavigationIcon key={icon.id} icon={icon} />
))}
</View>
)}
</IconContext.Consumer>
);
};
export default NavigationIcons;
The children file is structured like this
import React from "react";
import { Pressable, Icon } from "react-native";
function NavigationIcon(props) {
return (
js:6 <Pressable onPress={() => console.log("pressed icon ")}>
<Icon name={props.icon.name} type={props.icon.type} />
</Pressable>
);
}
export default NavigationIcon;
Here's the error message:
Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: %s.%s%s, 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 your code at NavigationIcon.js:6.,
in NavigationIcon (at NavigationIcons.js:12)
edit: I did try importing NavigationIcon as import {NavigationIcon} from "..."
I figured it out. I'm using expo for my app development and it uses 0.62. I was trying to utilize the new component Pressable which came out in 0.63
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;
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:
When importing a component as an alias I receive this error:
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 Divider.
import { Divider as MuiDivider} from 'material-ui/Divider'
const Divider = () => <MuiDivider style={{margin: '1em 2em'}} />
<Divider />
This works:
import Divider from 'material-ui/Divider'
<Divider />
You're mixing up two different parts of the ES6 import syntax:
import Divider from 'material-ui/Divider'
and
import {Divider} from 'material-ui/Divider'
are not the same.
The first imports the default export (which plays well with CommonJS modules as well), whereas the second looks for a named export caleld Divider.
You can however give your default import any name you want:
import MuiDivider from 'material-ui/Divider'