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'
Related
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 trying to do some simple snapshot testing using React and Jest.
Initially I was getting this error: Invariant failed: You should not use <Link> outside a <Router>
After reading this question I updated my test and wrapped the component I'm testing in: <MemoryRouter>...</MemoryRouter>. Once I did this, I started getting a new error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object. I have no idea what that means.
My test:
import React from "react";
import BookTile from "./BookTile";
import MemoryRouter from "react-router-dom";
import renderer from "react-test-renderer";
test("my test", () => {
let book = {};
const component = renderer.create(
<MemoryRouter>
<BookTile book={book} />
</MemoryRouter>
)
let tree = component.toJSON();
expect(tree).toMatchSnapshot();
})
The component I'm testing:
import React from "react";
import {Link} from "react-router-dom";
export default function BookTile(props) {
return (
<Link to={`/book/${props.book.id}`}>
<div className="book-tile" style={{'backgroundImage': `url(${process.env.REACT_APP_API_URL}/uploads/${props.book.cover_image_file_name})`}}>
<div className='book-tile-title'>
{props.book.title}
</div>
</div>
</Link>
)
}
You are not importing memory router correctly. Here's how it should look like:
import {MemoryRouter} from 'react-router-dom'
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 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;