Vitest having problems with the types of firebase/auth/web-extension

[JakobJFL]

Operating System

Windows 11

Browser Version

No browser was used for the test

Firebase SDK Version

10.10.0

Firebase SDK Product:

Auth

Describe your project's tooling

Vue 3 app with Vite and Vitest all with typescript.

Describe the problem

After updating Firebase and changing my imports from "firebase/auth" to "firebase/auth/web-extension", one of my Vitests fails.
The test is very simple and it just checks if a function returns the right strings. But the function that is being tested is in a .ts file that also imports onAuthStateChanged from "firebase/auth/web-extension". This is what gives me the error; if I remove it, I don't get the error.

This is the error:
Vitest caught 1 unhandled error during the test run.
This error originated in "mytest.test.ts" test file. It doesn't mean the error was thrown inside the file itself, but while it was running.
Module ...node_modules/@firebase/auth/dist/web-extension-esm2017/index.js:1 seems to be an ES Module but shipped in a CommonJS package. You might want to create an issue to the package "@firebase/auth" asking them to ship the file in .mjs extension or add "type": "module" in their package.json.

Steps and code to reproduce issue

Create a vite test in vitest called for example mytest.test.ts with this code:

import { describe, it } from "vitest";
import { onAuthStateChanged, getAuth } from "firebase/auth/web-extension";

describe("test", () => {
  it("is bad", () => {
    onAuthStateChanged(getAuth(), () => {});
  });
});

[hsubox76]

We need to add this plugin https://github.com/firebase/firebase-js-sdk/blob/master/packages/auth/rollup.config.js#L170 to the web-extension build, which injects a package.json sibling file next to the bundle that just says "{type: module}". I think we actually need to have it on the main auth build too, I'm surprised it hasn't been a problem there.

[wegry]

I believe we're using this update. Still seeing some issues with typings not quite lining up in Typescript 5.4.2:

yarn tsc --build --watch
[9:07:36 AM] Starting compilation in watch mode...

.yarn/__virtual__/@firebase-auth-virtual-71e7d0bce6/0/cache/@firebase-auth-npm-1.7.2-ae578599ac-093abfe7a6.zip/node_modules/@firebase/auth/dist/web-extension-esm2017/src/model/popup_redirect.d.ts:30:40 - error TS2503: Cannot find namespace 'gapi'.

30 export interface GapiAuthEvent extends gapi.iframes.Message {
                                          ~~~~

.yarn/__virtual__/@firebase-auth-virtual-71e7d0bce6/0/cache/@firebase-auth-npm-1.7.2-ae578599ac-093abfe7a6.zip/node_modules/@firebase/auth/dist/web-extension-esm2017/src/core/auth/auth_impl.d.ts:17:10 - error TS2305: Module '"@firebase/app"' has no exported member '_FirebaseService'.

17 import { _FirebaseService, FirebaseApp } from '@firebase/app';
            ~~~~~~~~~~~~~~~~

.yarn/__virtual__/@firebase-auth-virtual-71e7d0bce6/0/cache/@firebase-auth-npm-1.7.2-ae578599ac-093abfe7a6.zip/node_modules/@firebase/auth/dist/web-extension-esm2017/src/core/auth/auth_impl.d.ts:19:47 - error TS2307: Cannot find module '@firebase/app-check-interop-types' or its corresponding type declarations.

19 import { AppCheckInternalComponentName } from '@firebase/app-check-interop-types';
                                                 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

.yarn/__virtual__/@firebase-auth-virtual-71e7d0bce6/0/cache/@firebase-auth-npm-1.7.2-ae578599ac-093abfe7a6.zip/node_modules/@firebase/auth/dist/web-extension-esm2017/src/core/auth/auth_impl.d.ts:65:70 - error TS2344: Type '"heartbeat"' does not satisfy the constraint '"auth"'.

65     constructor(app: FirebaseApp, heartbeatServiceProvider: Provider<'heartbeat'>, appCheckServiceProvider: Provider<AppCheckInternalComponentName>, config: ConfigInternal);
                                                                        ~~~~~~~~~~~

[dlarocque]

I believe we're using this update. Still seeing some issues with typings not quite lining up in Typescript 5.4.2:

yarn tsc --build --watch
[9:07:36 AM] Starting compilation in watch mode...

.yarn/__virtual__/@firebase-auth-virtual-71e7d0bce6/0/cache/@firebase-auth-npm-1.7.2-ae578599ac-093abfe7a6.zip/node_modules/@firebase/auth/dist/web-extension-esm2017/src/model/popup_redirect.d.ts:30:40 - error TS2503: Cannot find namespace 'gapi'.

30 export interface GapiAuthEvent extends gapi.iframes.Message {
                                          ~~~~

.yarn/__virtual__/@firebase-auth-virtual-71e7d0bce6/0/cache/@firebase-auth-npm-1.7.2-ae578599ac-093abfe7a6.zip/node_modules/@firebase/auth/dist/web-extension-esm2017/src/core/auth/auth_impl.d.ts:17:10 - error TS2305: Module '"@firebase/app"' has no exported member '_FirebaseService'.

17 import { _FirebaseService, FirebaseApp } from '@firebase/app';
            ~~~~~~~~~~~~~~~~

.yarn/__virtual__/@firebase-auth-virtual-71e7d0bce6/0/cache/@firebase-auth-npm-1.7.2-ae578599ac-093abfe7a6.zip/node_modules/@firebase/auth/dist/web-extension-esm2017/src/core/auth/auth_impl.d.ts:19:47 - error TS2307: Cannot find module '@firebase/app-check-interop-types' or its corresponding type declarations.

19 import { AppCheckInternalComponentName } from '@firebase/app-check-interop-types';
                                                 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

.yarn/__virtual__/@firebase-auth-virtual-71e7d0bce6/0/cache/@firebase-auth-npm-1.7.2-ae578599ac-093abfe7a6.zip/node_modules/@firebase/auth/dist/web-extension-esm2017/src/core/auth/auth_impl.d.ts:65:70 - error TS2344: Type '"heartbeat"' does not satisfy the constraint '"auth"'.

65     constructor(app: FirebaseApp, heartbeatServiceProvider: Provider<'heartbeat'>, appCheckServiceProvider: Provider<AppCheckInternalComponentName>, config: ConfigInternal);
                                                                        ~~~~~~~~~~~

Hi @wegry, sorry for missing your comment.
I just now tested the code posted in this issue and it now works on Firebase 10.12.2.
If you are still experiencing these errors, could you create a new GitHub issue to share more details?