打字稿：使用打字稿和webpack 2解决typeahead.js

Question

I am getting the following error from webpack.

ERROR in ./wwwroot/js/admin/infrastructure/typeaheadComponent.ts Module not found: Error: Can't resolve 'typeahead' in ...

I have the following installed

npm install typeahead.js
npm install @types/typeahead

My typescript is as follows, using node module resolution.

import { module } from "angular";
import "typeahead";
// necessary to import typeahead into JQuery, as otherwise
// typeahead below is not defined.

class TypeAheadController {
    foo(e) {
       $(e).typeahead(...)
    }
}

this generates javascript as follows:

"use strict";
var angular_1 = require("angular");
require("typeahead");
var TypeAheadController = (function () { ...

My webpack.config.js is as follows:

module.exports = {
    context: __dirname,
    entry: [
        "./app.ts",
        "./tab.ts",
        "./client/clientService.ts",
        "./client/clientSearchComponent.ts",
        "./infrastructure/messageComponent.ts",
        "./infrastructure/typeaheadComponent.ts",
        "./url.ts"],
    output: {
        filename: "./wwwroot/js/admin/admin.js"
    },
    devtool: "source-map",
    module: {
        rules: [
            { test: /\.ts$/, use: 'ts-loader' }
        ]
    }
};

imported into a gulp task.

How do I specify that typeahead is located in node_modules/typeahead.js/dist/typeahead.bundle.js

Answer 1

The module is called typeadhead.js so you also need to import typeahead.js , not typeahead .

import "typeahead.js";

The import is always the same as the name you use to install it with npm. And it's not even special, it simple looks into node_modules and finds the directory with the given name. Then it looks into package.json and imports the file specified in the main field . See also Node.js - Folders as Modules .

You could use resolve.alias to change the name of the import, but there is not really a good reason for doing that in this case.

Answer 2

You could solve this using aliasing. Minimal example of what to change in your webpack.config.js :

module.exports = {
  /* ... everything you currently have */
  resolve: {
    alias: {
      typeahead: 'typeahead.js'
    }
  }
}

Answer 3

I resolved this by making the following changes.

You need to import Bloodhound and Typeahead seperately. To do this edit your webpack.config.js

  resolve: {
    extensions: ['.js', '.ts'],
    alias: {
      typeahead: 'corejs-typeahead/dist/typeahead.jquery.min.js',
      bloodhound: 'corejs-typeahead/dist/bloodhound.min.js'
    }
  },

And then in your .ts file:

import "typeahead";
import * as Bloodhound from "bloodhound";