Usage issues with Vite

[MetaMmodern]

Hi, I'm trying to use this plugin with Vite, but it doesn't work, giving me error:
require is not defined.

Here is the configuration:

vite.config.js:

import babel from 'vite-plugin-babel'
...
    plugins: [
      babel({
        babelConfig: {
          plugins: [
            [
              "babel-plugin-ng-hot-reload",
              {
                angularGlobal: "angular",
              },
            ],
          ],
        },
      }),
    ]
...

And here is the generated code where error happens:

And here's index.js:

import { bootstrap } from "angular";

import KeycloakService from "./app/scripts/services/KeycloakService";

const component = () => {
  const element = document.createElement("div");

  element.style.height = "100%";

  element.innerHTML = `
            <app></app>
      `;

  return element;
};

(async () => {
  try {
    await KeycloakService.initKeycloak();
  } catch (error) {
    console.error(error);
    // TODO: handle this better way.
    alert(
      "Failed to initialize application. Please contact support"
    );
    return;
  }

  const { default: app } = await import("./app/app");
  angular.element(() => {
    bootstrap(document, [app.name]);
  });
})();

document.body.appendChild(component());

It's definetely not an issue with vite-babel-plugin(owlsdepartment/vite-plugin-babel#10), because it works fine when I don't use your plugin.

[MetaMmodern]

Okay, I found out that the core issue is with angularReference, so I set it to be 'angular', but now it tells me that module is not defined.

However, I still see a require call inside, so I don't think this will change much, but I'll try to replace it with import statement

[MetaMmodern]

Okay, I checked webpack and parcel docs, I see that this module.hot stuff is something specific to them, I won't have those in Vite.
In Vite it should be import.meta.hot as described here: https://vitejs.dev/guide/api-hmr.html

But still issue persists, too much strange errors.