How to import into typescript project

[thespacedeck]

Hi there,

Apologies for this question. But how do I import this lib into typescript project. I've tried:

//app.ts import * as fuzzball from "fuzzball"; fuzzball.partial_ratio(a, b, options);

ERR: Uncaught ReferenceError: require is not defined at fuzzball.js?v=62d528f1:4 at fuzzball.js?v=62d528f1:1039

Your assistance is appreciated :) Rgds, SS

[nol13]

What bundler are you using/environment? I think the syntax should be fine you just need webpack or something to make require() available in the browser.

Including the pre-built umd bundle from the dist folder might be another option.

Or possibly, if just using tsc, import from 'fuzzball/dist/fuzzball.umd.min.js' while also setting the tsc module flag to esnext instead of CommonJS? I'm honestly not too familiar with the latest typescript build chains though beyond a few smoke tests I have to make sure tsc is able to compile code using fuzzball.

[thespacedeck]

Hi there,

Thank you for replying.

Basically I have npm library with fuzzball as dependency in which the above code lie:

import * as fuzzball from "fuzzball";
fuzzball.partial_ratio(a, b, options);

Testing the code locally in my vite/vue project via npm iinstall ../path/to/npm/project works perfectly fine. After deployment to npm, the vite/vue project results in error:

Uncaught ReferenceError: require is not defined
at fuzzball.js?v=62d528f1:4
at fuzzball.js?v=62d528f1:1039

// tsconfig.json
{
    "compilerOptions": {
      "target": "esnext",
      "module": "esnext",
      "moduleResolution": "node",
      "importHelpers": true,
      "isolatedModules": true,
      "noEmit": true
    }
  }

//vite.config.js
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from "path";

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      "@": path.resolve(__dirname, "/src"),
    },
  },
})

[nol13]

Have you tried it with..?

import * as fuzzball from "fuzzball/dist/fuzzball.umd.min.js";

Looks like Vite expects everything to be a valid esm module, ^that would use the pre-built UMD bundle where all of the require() calls should already be compiled.

It might be better to include it in your dependencies and let Vite build it if that works. I saw something about Vite not supporting modules with internal require calls though so hopefully the pre-built bundle would get around that, it if it's still an issue even after including it as a dependency.

https://vitejs.dev/config/#dep-optimization-options

https://github.com/vitejs/vite/issues/986

The default entry point isn't set to the .umd, in order to minimize file size and all that for other bundlers, but it is a new world now with browsers understanding import statements and such, there might be something that can be done to make fuzzball easier to use with Vite/esm.

[nol13]

Hmm, ya might need a new release to properly use this in modules, without a bundler. This seems to work testing locally in my browser in the meantime though.

<script type="module">
import './fuzzball.umd.min.js';
const fuzz = window.fuzzball;
console.log(fuzz.ratio('lol', 'lulz'))
</script>

Was messing around with a wrapper that re-exports from global, after importing the umd, but not an ideal situation.

I'll try to get an esm compatible version out soon.

[nol13]

Actually, probably needs vite-plugin-commonjs, but will get a native* esm version out soon.

https://github.com/originjs/vite-plugins/tree/main/packages/vite-plugin-commonjs

@thespacedeck, if you're still around:

1. does it work with that plugin
2. if you install from the esm branch i have pushed up, does it work without the plugin?

npm install git://github.com/nol13/fuzzball.js.git#esm

[nol13]

ok esm version out. if it's still an issue please re-open though!

[peteristhegreat]

FYI, there is now a types file included! ... Usage in typescript looks like this:

import { extract, token_set_ratio } from 'fuzzball';

const options = { scorer: token_set_ratio };

const results = extract(name, listOfNames, options);
const best = results[0];