Why doesn't web3 gun library work well together with Angular v18.2?

I'm trying to incorporate gun web3 library into my Angular app, but I'm running into the following error:

[vite] Internal server error: Cannot find module './lib/text-encoding' Require stack:
​

I'm using Angular v18.2 so Vite is incorporated into the pipeline, but it is not included in package.json nor the tsconfig.json nor the angular.json.

Everyting seemed to work fine until I decided to move my login logic into seperate component from the main app.component.ts

async ConnectMetaMask(){
await this.MetaMaskSDK.request({ method: 'eth_requestAccounts' }).then((accounts : any) => {
this.UserAccount = accounts[0];
});

if(this.UserAccount != null){
const gun = Gun();
this.accountConnected = true;

gun.get(`~@${this.UserAccount + "STF"}`).once(data => {
console.log(data);
if (data) {
this.loginNeeded = true;
} else {
this.registerNeeded = true;
}
});
}
}

async Login(){
const gun = Gun();
const user = gun.user();
const SEA = Gun.SEA;

if(this.loginNeeded){
user.auth(this.UserAccount + "STF", this.myForm.get('password')?.value, (ack) =>{
if ('err' in ack) {
// Niepoprawne hasło
} else {
console.log("zalogowano");
this.loggeduserData.loggedUserWalletAddress = this.UserAccount;
this.loggeduserData.loggedUserWalletAddressSTF = this.UserAccount + "STF";
this.routerAN.navigate(['/dashboard']);
}
});
}
else{
user.create(this.UserAccount + "STF", this.myForm.get('password')?.value, ack => {
if (ack) {
console.log('Error:', ack);
} else {
console.log('User created successfully:', ack);
}
});
}
}


I generated a new component, moved my logic there and the error popped. These are my imports from the new component with login:

import { Component, OnInit } from '@angular/core';
import { PinataSDK } from "pinata-web3";
import { Router, RouterLink, RouterModule, RouterOutlet } from '@angular/router';
import { CommonModule } from '@angular/common';
import { FormBuilder, FormControl, FormGroup, FormsModule, ReactiveFormsModule } from '@angular/forms';
import { MetaMaskSDK } from "@metamask/sdk";
import Gun from 'gun';
import 'gun/sea';
import { LoggedUserDataService } from '../../../resources/LoggedUserDataService/logged-user-data.service';
import { env } from '../../../env';


Developer seems to give a sort of solution to this problem (https://gun.eco/docs/Vite), but it requires a change too be made inside vite.config.js which is not available in Angular v18.2.

I would appreciate any help

Continue reading...