Tippy JS Import not working in module federation scenario

[DarkLiKally]

Hi! 👋

Firstly, thanks for your work on this project! 🙂

Today I used patch-package to patch ngx-tippy-wrapper@6.1.0 for the project I'm working on.

I'm using it with Angular 14 and I have some module federation setup where tippy.js and ngx-tippy-wrapper are also shared modules.
Somehow in this setup the default import "tippy" from "tippy.js" does result in the imported value being the Module itself (typeof Module, having default as property).

I already googled for this issue with all kinds of different approaches and issue descriptions, related to angular, webpack, typescipt compiler and so on...
Also the most recommended steps to fix such issues related to CJS / UMD / Whatever modules being imported in angular typescript apps by setting allowSyntheticImports and esModuleInterop won't help.

Sadly none of the other things I tried helped to fix the issue either.

A setup with a standalone Angular app straight out of ng new and just following the instructions of ngx-tippy-wrapper is working fine without any issues. I just can't make it work in a setup with module federation.

Below you can see a diff of a small change I did to ngx-tippy-wrapper to make it work.

Maybe does someone have an idea what I'm doing wrong or what I can do to work around the issue other than modifying ngx-tippy-wrapper?

Or is this an issue related to ngx-tippy-wrapper, regarding this statement on the TS Docs:

the ES6 modules spec states that a namespace import (import * as x) can only be an object, by having TypeScript treating it the same as = require("x") then TypeScript allowed for the import to be treated as a function and be callable. That’s not valid according to the spec.
https://www.typescriptlang.org/tsconfig#esModuleInterop

Thank you for your patience and help! In case you need any futher information please let me know.

Here is the diff that solved my problem:

diff --git a/node_modules/ngx-tippy-wrapper/fesm2020/ngx-tippy-wrapper.mjs b/node_modules/ngx-tippy-wrapper/fesm2020/ngx-tippy-wrapper.mjs
index c55b233..624c499 100644
--- a/node_modules/ngx-tippy-wrapper/fesm2020/ngx-tippy-wrapper.mjs
+++ b/node_modules/ngx-tippy-wrapper/fesm2020/ngx-tippy-wrapper.mjs
@@ -1,9 +1,11 @@
 import { isPlatformServer, CommonModule } from '@angular/common';
 import * as i0 from '@angular/core';
 import { InjectionToken, PLATFORM_ID, ElementRef, Component, Inject, Input, ViewChild, isDevMode, Injectable, TemplateRef, Directive, NgModule } from '@angular/core';
-import tippy, { hideAll, createSingleton } from 'tippy.js';
+import tippyModule, { hideAll, createSingleton } from 'tippy.js';
 import { Subject } from 'rxjs';
 
+const tippy = tippyModule.default ?? tippyModule;
+
 const messagesDict = {
     instanceAlreadyExist: `Instance with name #tippyName already exist, please pick unique [tippyName]`,
     instanceNotExist: `Instance with name #tippyName does not exist`,

This issue body was partially generated by patch-package.

[farengeyt451]

Hello @DarkLiKally. Thank you for investigation)
I did not work with module federation scenario and it would be nice if you can create small repo with this issue

[DarkLiKally]

Hello @DarkLiKally. Thank you for investigation) I did not work with module federation scenario and it would be nice if you can create small repo with this issue

Thanks for your reply, maybe I find time on the weekend to create a small example repo with the issue for you 👍