Typeahead import with Vite fails in production mode

[Pfeil]

Hi :) (Sorry, beginner here.) I seem not to be able to use it with vite, but I am not sure what I am doing wrong. I probably have a simple vite issue, but maybe not (minimal example below). I have another webcomponent which works fine, and other dependencies in the same project also do not cause issues. So I wonder if typeahead-standalone has certain requirements? The error only occurs in production build when using it in a script tag in a HTML file (error from the example described below):

Uncaught TypeError: this is undefined
    <anonymous> typeahead-standalone.js:1
    <anonymous> typeahead-standalone.js:1
    <anonymous> typeahead-standalone.js:1
    <anonymous> typeahead-standalone.js:1
    <anonymous> typeahead-standalone.js:1
    <anonymous> some_sample-name.umd.js:370
    <anonymous> some_sample-name.umd.js:2
    <anonymous> some_sample-name.umd.js:3
typeahead-standalone.js:1:11429

Minimal example can be created like this:

• npm create vite@latest com_mapping_input_test -- --template vanilla-ts
• Make it a module bundle by adding a vite.config.js:

import { resolve, dirname } from "path";
import { defineConfig } from "vite";

const __dirname = dirname(__filename);

export default defineConfig({
  build: {
    sourcemap: true,
    lib: {
      entry: resolve(__dirname, "src/main.ts"),
      name: "some_sample-name",
      formats: ["es", "umd"],
      fileName: (format) => `some_sample-name.${format}.js`,
    },
    minify: false,
  },
});

• This code in main.ts:

import typeahead from "typeahead-standalone";

function hello() {
  console.log("hello");
  typeahead;
}

• Then create a HTML file using the result, e.g. npm run preview and then <script src="http://localhost:4173/com_mapping-service-input.umd.js"></script>

Any ideas? Thanks!

[niketpathak]

Hello @Pfeil , thank you for reporting this with details instructions. Will check this and get back with a fix, if necessary. Good day

[niketpathak]

Hello once again @Pfeil, after following the steps you gave, I realised that you are not using the correct built version. you must use the ESM version. Here's a repository where you can see that typeahead-standalone works as expected -> https://github.com/niketpathak/typeahead-standalone-vite.

[Pfeil]

Thank you for looking into the issue! I compared your example to our code and while we had some other issues in addition, which made it not work immediately, it pointed me into the correct direction to fix it quickly today. Thanks a lot for the help, and, of course, for the work on this library! :)

[craiggeil]

This answer makes no sense. It looks like you are asking for us to package our own version of typeahead to work with vite? Each time a new version comes out we will need to repackage this?

[Pfeil]

You can surely use the hosted version of any CDN, but in my case I included it and care about updates (via dependabot), like I do with all our applications anyway. It helps me in the process to make sure everything still works together regularly. The answer fits very well because this was exactly my use case. It might not fit your requirements.