How to import typeahead when working with typescript and webpack

Viewed 1115

I ran npm install typeahead and npm install @types/typeahead, however I am having trouble with importing typeahead into my tsx module:

import * as React from "react";
import "typeahead";

interface IReactTypeaheadInputProps {
    id: string,
    name: string,
    url: string,
    searchField: string,
}

export class ReactTypeaheadInput extends React.Component<IReactTypeaheadInputProps, {}>{

    componentDidMount(): void {
        .
        .
        .
        $("#" + this.props.id).typeahead<string>(typeaheadOptions, datasets);
    }

    render() {
        return (
            <input id={this.props.id} name={this.props.name}/>
        );
    }
}

I've tried:

  • various styles of import statements
  • adding an alias to my webpack.config.js file, like this:

    resolve: { alias: { typeahead: 'typeahead.js' } }

When I use import "typeahead", I get

Uncaught TypeError: $(...).typeahead is not a function

When I use import * as typeahead from "typeahead";, I get

Uncaught Error: Cannot find module "typeahead"

I am getting intellisense for the whole Twitter.Typeahead namespace (I'm using VS 2017). However I suspect that the npm typeahead package is not official because it is an older version and the name of the file is typeahead.js instead of index.js in the node_modules folder.

I've tried to include the newer version manually but I get the same results.

0 Answers
Related