Mixing FirebaseUI CDN with NPM managament

Looking for the best way to mix npm and FirebaseUI with i18n.

I have Firebase libraries in the project and I want to keep its management under npm. But FirebaseUI is not ready to use npm in other language than English.

So to use different languages, I need to import it via CDN.

I'm trying to figure out how to load FirebaseUI from CDN, but still using the compat libraries using npm.

Next, version working using only CDN and version failing to mix with npm.

Working version using CDN to load firebase libraries:

<script is:inline src="https://www.gstatic.com/firebasejs/9.13.0/firebase-app-compat.js"></script>
<script is:inline src="https://www.gstatic.com/firebasejs/9.13.0/firebase-auth-compat.js"></script>
<script is:inline src="https://www.gstatic.com/firebasejs/ui/6.0.2/firebase-ui-auth__es.js"></script>
<link type="text/css" rel="stylesheet" href="https://www.gstatic.com/firebasejs/ui/6.0.2/firebase-ui-auth.css" />

<script>
    import firebaseConfig from 'js/firebase_config';

    const app = firebase.initializeApp(firebaseConfig);

    const uiConfig = {
       .......
    };

    const ui = new firebaseui.auth.AuthUI(firebase.auth());

    ui.start('#firebaseui-auth-container', uiConfig);
</script>

But this code throws an error:

<script is:inline src="https://www.gstatic.com/firebasejs/ui/6.0.2/firebase-ui-auth__es.js"></script>
<link type="text/css" rel="stylesheet" href="https://www.gstatic.com/firebasejs/ui/6.0.2/firebase-ui-auth.css" />

<script>
    import firebaseConfig from 'js/firebase_config';
    import firebase from 'firebase/compat/app';
    import 'firebase/compat/auth';

    const app = firebase.initializeApp(firebaseConfig);

    const uiConfig = {
       .......
    };

    const ui = new firebaseui.auth.AuthUI(firebase.auth());

    ui.start('#firebaseui-auth-container', uiConfig);
</script>

Error:

firebase-ui-auth__es.js:422 Uncaught ReferenceError: firebase is not defined
    at new Dn (firebase-ui-auth__es.js:422:1944)

Looks like adding window.firebase = firebase; is fixing the problem, but is this the way?

Note: Still a question pending: why it's not working without this workaround? I'm open to mark other answer as valid if it its response with a reason about why this.

Working mixing:

<script src="https://www.gstatic.com/firebasejs/ui/6.0.2/firebase-ui-auth__es.js"></script>
<link type="text/css" rel="stylesheet" href="https://www.gstatic.com/firebasejs/ui/6.0.2/firebase-ui-auth.css" />

<script>
    import firebaseConfig from 'js/firebase_config';
    import firebase from 'firebase/compat/app';
    import 'firebase/compat/auth';

    // Fix firebaseUI not finding the firebase instance.
    window.firebase = firebase;

    const app = firebase.initializeApp(firebaseConfig);

    const uiConfig = {
       .......
    };

    const ui = new firebaseui.auth.AuthUI(firebase.auth());

    ui.start('#firebaseui-auth-container', uiConfig);
</script>