React-autosuggest: Uncaught Error: 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 `HomePage`.

[pradeemi]

Are you reporting a bug? Yes

• Please create a Codepen that demonstrates your issue. You can start from the Basic example.

• Provide the steps to reproduce the issue,
  --Installled the component
  -- And added below component after copying all the required code mentioned in GITHUB site.

suggestions={suggestions}
onSuggestionsFetchRequested={this.onSuggestionsFetchRequested}
onSuggestionsClearRequested={this.onSuggestionsClearRequested}
getSuggestionValue={this.getSuggestionValue}
renderSuggestion={this.renderSuggestion}
inputProps={inputProps} />

Observed behaviour: Throws below error in browser
Uncaught Error: 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 HomePage.

Are you making a feature request? No

• Please describe your use case from user journey point of view:

  I am getting below error when I am using "AutoSuggest" component in my "HomePage.tsx" file.
  Uncaught Error: 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 HomePage.

[n4gashi]

The codepen linked is the basic example, not your code. I suggest you send your code so we can have a better view of what's going on. The error says that one of the required props that you send is undefined. I suggest you to try logging all the data you are passing to ensure everything is right.

[pradeemi]

Please find my code below:

import Autosuggest from 'react-autosuggest';

const languages = [
{
name: 'C',
year: 1972
},
{
name: 'C#',
year: 2000
},
{
name: 'C++',
year: 1983
},
{
name: 'Clojure',
year: 2007
},
{
name: 'Elm',
year: 2012
},
{
name: 'Go',
year: 2009
},
{
name: 'Haskell',
year: 1990
},
{
name: 'Java',
year: 1995
},
{
name: 'Javascript',
year: 1995
},
{
name: 'Perl',
year: 1987
},
{
name: 'PHP',
year: 1995
},
{
name: 'Python',
year: 1991
},
{
name: 'Ruby',
year: 1995
},
{
name: 'Scala',
year: 2003
}
];

const packageData = require('json!../../../package.json');

let client = require('./azure-search')({
url: 'https://uatidr.search.windows.net',
key: 'B60AF29D4CFAE5C1EEF28D159DD5953D'
})

export var projectResults;
export var customerResult;

export class HomePage extends React.Component {

constructor() {
super();
this.state = {
value: '',
suggestions: []
};
}

onChange = (event, { newValue, method }) => {
this.setState({
value: newValue
});
};

onSuggestionsFetchRequested = ({ value }) => {
this.setState({
suggestions: this.getSuggestions(value)
});
};

onSuggestionsClearRequested = () => {
this.setState({
suggestions: []
});
};

escapeRegexCharacters(str) {
return str.replace(/[.*+?^${}()|[]\]/g, '\$&');
}
getSuggestions(value) {
const escapedValue = this.escapeRegexCharacters(value.trim());

if (escapedValue === '') {
return [];
}

const regex = new RegExp('^' + escapedValue, 'i');

return languages.filter(language => regex.test(language.name));
}

getSuggestionValue(suggestion) {
return suggestion.name;
}

renderSuggestion(suggestion) {
return (
{suggestion.name}
);
}

public render() {

const { value, suggestions } = this.state;
const inputProps = {
  placeholder: "Type 'c'",
  value,
  onChange: this.onChange
};

return (
  <div className={ styles.divMainHomePage }>

    <Autosuggest
    suggestions={suggestions}
    onSuggestionsFetchRequested={this.onSuggestionsFetchRequested}
    onSuggestionsClearRequested={this.onSuggestionsClearRequested}
    getSuggestionValue={this.getSuggestionValue}
    renderSuggestion={this.renderSuggestion}
    inputProps={inputProps}
  />

[daffinito]

For anyone else running into this, I was able to solve it by changing my import

import * as Autosuggest from "react-autosuggest";

[dgwaldo]

I've ran into this as well, using Typescript.

_react.development.js:276 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._

Check the render method of CompanyTypeahead. The only thing in render is the Autosuggest component.

Here are my ts settings.

"compilerOptions": { "jsx": "react", "module": "esnext", "moduleResolution": "node", "allowJs": true, "allowSyntheticDefaultImports": true, "esModuleInterop": true, "outDir": "./dist/", "sourceMap": true, "target": "esnext", "experimentalDecorators": true, "removeComments": false },

If I do the import as import * as Autosuggest from 'react-autosuggest'; I get the following error.

TS2604: JSX element type 'Autosuggest' does not have any construct or call signatures.

Would getting rid of the namespace and using a default export clear this up?