Check the render method of `App`

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 App.

App.js

import React, {Component, Fragment} from 'react'; import {Typeahead, Control} from 'react-typeahead'; import {FormGroup} from 'react-bootstrap'; export default class App extends Component { constructor(props) { super(props); this.state = { multiple: false } } render() { const {multiple} = this.state; return ( <Fragment> <Typeahead labelKey="name" multiple={multiple} options={[ 'Waylon Dalton', 'Justine Henderson', 'Abdullah Lang', 'Marcus Cruz', 'Thalia Cobb', 'Mathias Little', 'Eddie Randolph', 'Angela Walker', 'Lia Shelton', 'Hadassah Hartman', 'Joanna Shaffer', 'Jonathon Sheppard' ]} placeholder="Choose a state..." /> <FormGroup> <Control checked={multiple} onChange={(e) => this.setState({multiple: e.target.checked})} type="checkbox"> Multi-Select </Control> </FormGroup> </Fragment> ) } } 

index.js

import React from 'react'; import ReactDOM from 'react-dom'; import './index.css'; import App from './App'; ReactDOM.render(<App />, document.getElementById('root')); 

I created this project using CRA. This error states that there is something wrong in my import/export but i don't find anything wrong in my import/export of both the files, error is focusing on App.js render function and also render of index.js file. I also checked here but it didn't work for me, can someone help me.

6 Answers

Your App import/export is ok.

I think you mixed up the Fragment import (it's part of React) and the Control import:

import React, {Component, Fragment} from 'react'; import {Typeahead} from 'react-typeahead'; import {FormGroup, FormControl as Control} from 'react-bootstrap'; 

I have had the same issue. In my case it was me using the wrong HOCs from MobX, namely observable instead of observer.

If you have made the same mistake you can fix it by switching

export default observable(MyReactComponent); 

to

export default observer(MyReactComponent); 

Not so sure if this will help, but this solved it for me.

First code to bring the same error

import React from 'react'; import { BrowserRouter , Route, Link} from 'react-dom';*** import './App.css'; 

Then I realized that it's actually supposed to be

import React from 'react'; import { BrowserRouter , Route, Link} from 'react-router-dom';*** import './App.css'; 

Check import statements

It may be likely that your import statements are not importing from the correct files. Make sure that they are all correct.

example:

import { Link } from "react"; // oops! hard to see, but that's the wrong file. import { Link } from "react-router-dom"; // that's better 

Check spelling of components

// what's wrong with this? const pageOne = () => { return (<Link to="/pagetwo"> pagetwo </Link>); // oops! spelling of the component is wrong! }; const pageTwo = () => { return (<Link to="/"> pageone </Link>); }; 

They're not going to work because the spelling of the components are not right. It's easy to spot when you know what you're looking for.

Give your options element a key attribute having a unique id/key like...

<options key={value}> some dummy options here <options/> 

This should solve the problem.

I think the issue resides here:

import {Typeahead, Fragment, Control } from 'react-typeahead'; 

The Typeahead import is okay but I think Fragment and Control are the source of your error. Can upi please try to remove them and see if that helps?