Fix typescript issues with commonjs

[ronzeidman]

Thanks for creating a typescript definition!
I have issues using it though...
I expect to use it like this:

import * as Fuse from 'fuse.js'; // - won't work since the actual "class" is inside fuse - Fuse.Fuse
// or import {Fuse} from 'fuse.js'; // - won't work since there is no actual variable named Fuse inside Fuse
// or import 'fuse.js'; - I can't see the global deceleration if I import it that way since UMD doesn't declare global when commonjs is available
const seachResults = new Fuse(rows ...

all of the above don't work, as a workaround I can do this:

import * as F from 'fuse.js';
interface Type<T> extends Function {
    new (...args: any[]): T;
}
const Fuse: Type<F.Fuse> = <any>F;

but this is not ideal
That's why I've changed the typescript definitions to something I can use out-of-the-box with commonjs.

[avbentem]

See also http://stackoverflow.com/questions/41061328/why-does-webpack-fail-to-find-a-module-when-the-typescript-compiler-doesnt/41195089#41195089

[avbentem]

Disclaimer: I am not an expert. Not at all.

I've tested the pull request in webpack (Angular 2, Angular CLI which expects typescript@2.0.10, but same results with 2.1.4), and am getting some errors.

declare const Fuse = fuse.js.Fuse;

...tells me:

Error:(31, 5) TS1038:A 'declare' modifier cannot be used in an already ambient context.
Error:(31, 24) TS1039:Initializers are not allowed in ambient contexts.

And

declare const Fuse: fuse.js.Fuse;

...gives me:

Error:(35, 21) TS2503:Cannot find namespace 'fuse'.

Next, for:

import {Fuse, FuseOptions} from 'fuse.js';

...I get:

TS2305:Module ''fuse.js'' has no exported member 'Fuse'.
TS2305:Module ''fuse.js'' has no exported member 'FuseOptions'.

Using a suggested index.d.ts from Stack Overflow's Why does Webpack fail to find a module when the TypeScript compiler doesn't? with, e.g.,

import {Fuse, FuseOptions} from 'fuse.js';

...or

import * as fuselib from 'fuse.js';

...gets me:

Error:(2, 33) TS2497:Module '".../node_modules/fuse.js/index"' resolves to a non-module entity and cannot be imported using this construct.

Still investigating...

[ronzeidman]

I'm using import * as Fuse from 'fuse.js';
it works for me without issues under typescript 2.0.10, webpack 2.1.0-beta.28, ts-loader 1.3.2
so your import * as fuselib from 'fuse.js'; should have worked.

[ronzeidman]

tested the patch using npm i -D ronzeidman/Fuse#patch-1

[aluanhaddad]

@ronzeidman I am sorry for the confusion. I had a mistake in my answer on Stack Overflow. I neglected to nest the globally defined interface FuseOptions within either the Fuse namespace or within a declare global clause`. I have since updated my answer with a working tested version. I also added comprehensive examples of how to import the module correctly.

http://stackoverflow.com/a/41195089/1915893

[mikeacameron]

Anyone manage to get this working with Webpack? I've tried everything listed here and SO. Webpack still complains that it cannot find module fuse.js.

[ronzeidman]

Try using my fork:
npm i -D ronzeidman/Fuse#patch-1
And importing this way:

Import * as Fuse from 'fuse.js'

Should work (that's what I'm doing, and I'm using webpack)

[mikeacameron]

I get the same error.

Mind sharing your Webpack config?

[aluanhaddad]

My declaration, from SO works. Here it is working, with Webpack 2.
run
npm start
to replace the declaration, run Webpack, serve the app.
https://github.com/aluanhaddad/fusingly

[aluanhaddad]

#129

[mikeacameron]

@aluanhaddad Thank you!

I got it working using your fix when I converted to Webpack 2.

[aluanhaddad]

Should work fine in Webpack 1 also. Just make sure you set the extension resolver.

[krisk]

Is this still needed?

[aluanhaddad]

Personally, I would say no because it will pollute the global namespace of ambient external module declarations preventing 2 versions of fuse.js from being used side by side without causing type errors. From what I can see, the library supports multi-versioning.