Webpack 2: How to match package with mismatched @types?

Question

I'm trying to use webpack 2 to import SoundJS (one module of the createJS framework) into my typescript project.

in vendors.ts I have

import "soundjs";

along with several other working imports

The @types definitions imported using npm are named "soundjs", but the npm package "soundjs" is empty, so I have to use another npm package, named "createjs-soundjs" and this is causing a resolution error.

When I try to compile with webpack, I am getting the error "Module not found: Error: Can't resolve 'soundjs' in '[path to the folder containing vendor.ts]'

How can I fix webpack 2 so that it resolves to the createjs-soundjs package?

Thanks in advance for your help :)

Answer 1

How can I fix webpack 2 so that it resolves to the createjs-soundjs package?

You don't need to, because createjs-soundjs is not packaged as a module. This is from soundjs-0.6.2.min.js which is the entry point of the library.

this.createjs=this.createjs||{},function()...

which means the library will be available globally in the browser context.

You can also notice this from the @types/soundjs definition, where everything can be accessed globally through the namespaces

declare namespace createjs {
    export class AbstractPlugin {
        create(src: string, startTime: number, duration: number): AbstractSoundInstance;
        getVolume(): number;
        isPreloadComplete(src: string): boolean;
        ...
    }
}

So how we going to use this library with TypeScript?

import "createjs-soundjs";
console.log(createjs.RequestUtils.isImageTag("foo")); // false

You should get contextual-awareness (e.g. code completion) if @types/soundjs is already installed and included in the project.