typescript: resolving typeahead.js with typescript and webpack 2

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

Michael Jungo · Accepted Answer · 2017-03-28 21:19:00Z

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.

answered Mar 28, 2017 at 21:19

Michael Jungo

33.2k4 gold badges97 silver badges87 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Jim Over a year ago

this doesn't work, as soon as I change import "typeahead" to import "typeahead.js" the typescript compiler fails with property typeahead does not exist on type JQuery, as I explained in the question, the import is necessary because the type definitions are in typeahead, not typeahead.js

Jim Over a year ago

additionally, if I use import "typeahead.js", webpack includes the file in the output, but the variable Bloodhound is not defined, so whilst the file is included in the output, the types in it are not accessible in the javascript.

user6750100 · Accepted Answer · 2019-02-28 14:01:03Z

1

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";

answered Feb 28, 2019 at 14:01

user6750100

Comments

Balázs Édes · Accepted Answer · 2017-03-31 14:20:06Z

0

+50

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'
    }
  }
}

answered Mar 31, 2017 at 14:20

Balázs Édes

13.9k7 gold badges60 silver badges105 bronze badges

1 Comment

Jim Over a year ago

it solves part of the problem, the typeahead.js file is included in the output after it's used by the component so the whole import is still broken, and requires me to include the typeahead.js file manually anyway.

Collectives™ on Stack Overflow

typescript: resolving typeahead.js with typescript and webpack 2

3 Answers 3

2 Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related