I am trying to build a simple frontend page with react bootstrap typeahead library, import from CDN.
Here is the partial code for the frontend:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script crossorigin src="https://unpkg.com/react@17/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js"></script>
<script crossorigin src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.26.0/babel.min.js"></script>
<script crossorigin src="https://cdnjs.cloudflare.com/ajax/libs/react-bootstrap-typeahead/5.1.4/react-bootstrap-typeahead.js"></script>
<script type="text/babel">
class JobsTypeahead extends React.Component {
constructor(props) {
super(props);
this.state = {loading: false, options: []};
}
handleSearch(query) {
this.setState({loading: true});
fetch(`${site}/api/v2/job?name__icontains=${query}`)
.then((resp) => resp.json())
.then(({ items }) => {
const options = items.objects.map((i) => ({
id: i.id,
name: i.name,
}));
this.setState({loading: false, options: options});
});
};
render() {
return (
<AsyncTypeahead
id="job-typeahead"
isLoading={isLoading}
labelKey="login"
minLength={1}
onSearch={handleSearch}
options={options}
placeholder="Type in key words"
renderMenuItemChildren={(option, props) => (
<Fragment>
<span>{option.name}</span>
</Fragment>
)}
/>
);
};
}
</script>
But when I try to render the JobsTypeahead, there are errors complaining AsyncTypeahead is not defined:
react-dom.production.min.js:141 ReferenceError: AsyncTypeahead is not defined
at JobsTypeahead.render (<anonymous>:56:34)
at Te (react-dom.production.min.js:119)
at Ch (react-dom.production.min.js:119)
at Pj (react-dom.production.min.js:233)
at di (react-dom.production.min.js:168)
at Nj (react-dom.production.min.js:168)
at sc (react-dom.production.min.js:168)
at gf (react-dom.production.min.js:162)
at Pa (react-dom.production.min.js:157)
at yd (react-dom.production.min.js:188)
jquery-3.1.0.min.js:2 jQuery.Deferred exception: AsyncTypeahead is not defined ReferenceError: AsyncTypeahead is not defined
at JobsTypeahead.render (<anonymous>:56:34)
at Te (https://unpkg.com/react-dom@17/umd/react-dom.production.min.js:119:308)
at Ch (https://unpkg.com/react-dom@17/umd/react-dom.production.min.js:119:105)
at Pj (https://unpkg.com/react-dom@17/umd/react-dom.production.min.js:233:139)
at di (https://unpkg.com/react-dom@17/umd/react-dom.production.min.js:168:305)
at Nj (https://unpkg.com/react-dom@17/umd/react-dom.production.min.js:168:236)
at sc (https://unpkg.com/react-dom@17/umd/react-dom.production.min.js:168:96)
at gf (https://unpkg.com/react-dom@17/umd/react-dom.production.min.js:162:109)
at Pa (https://unpkg.com/react-dom@17/umd/react-dom.production.min.js:157:184)
at yd (https://unpkg.com/react-dom@17/umd/react-dom.production.min.js:188:476) undefined
jquery-3.1.0.min.js:2 Uncaught ReferenceError: AsyncTypeahead is not defined
at JobsTypeahead.render (<anonymous>:56:34)
at Te (react-dom.production.min.js:119)
at Ch (react-dom.production.min.js:119)
at Pj (react-dom.production.min.js:233)
at di (react-dom.production.min.js:168)
at Nj (react-dom.production.min.js:168)
at sc (react-dom.production.min.js:168)
at gf (react-dom.production.min.js:162)
at Pa (react-dom.production.min.js:157)
at yd (react-dom.production.min.js:188)
Anyone spot if I did something wrong?
The global exposed by the UMD module is ReactBootstrapTypeahead. So to access AsyncTypeahead, you need to do
window.ReactBootstrapTypeahead.AsyncTypeahead