vitest run in a nuxt-vuefire project results in warnings about INTERNAL ASSERTION FAILED (@firebase/auth)

[chrisspiegl]

Reproduction

https://github.com/chrisspiegl/reproduction-nuxt-vuefire-vitest-auth-internal-assertion

Steps to reproduce the bug

1. Install reproduction pnpm install
2. pnpm dev

• works without any logged warnings or errors

3. pnpm test

• results in a warning / failed assertion in firebase
• @firebase/auth: Auth (10.12.4): INTERNAL ASSERTION FAILED: Expected a class definition
• Detailed log / console output in the "Additional Info" section

4. The tests in the minimal reproduction do run through and are successful (playwright & $fetch('/')

I tested this with the emulator & with a real firebase project. In both cases the regular build works, but the test run has the issues.

When I run it in my bigger project, the failed assertion leads to bigger issues / unable to finish the testing.

Expected behavior

When running the vitest nuxt environment, I expect the output not to show warnings / errors which do not show up in the dev/prod build.

I also tried running the tests in the packages/nuxt folder but:

1. they are marked as skip
2. and when I removed the skip they did not work based on some module does not export… or something error.

Actual behavior

Console when running tests shows the @firebase/auth: Auth (10.12.4): INTERNAL ASSERTION FAILED: Expected a class definition stack trace.

Running the same pnpm test with auth: { enabled: false } in the nuxt.config.ts does not show the warning/error.

Additional information

Stack Trace from Console Output

❯ pnpm vitest 

 DEV  v1.5.1 /Users/chrisspiegl/Sites/Projects/test/nuxt-app

stderr | Logger.defaultLogHandler [as _logHandler] (file:/Users/chrisspiegl/Sites/Projects/test/nuxt-app/node_modules/.pnpm/@[email protected]/node_modules/@firebase/logger/src/logger.ts:115:57)
[2024-07-27T14:15:54.381Z]  @firebase/auth: Auth (10.12.4): INTERNAL ASSERTION FAILED: Expected a class definition

stderr | node_modules/.pnpm/[email protected]_@[email protected]_@[email protected][email protected][email protected]_rollup@4._7div7xdhtag73frzmkxpp66t4i/node_modules/nuxt/dist/app/nuxt.js:127:15
[nuxt] error caught during app initialization Error: INTERNAL ASSERTION FAILED: Expected a class definition
    at debugFail (file:///Users/chrisspiegl/Sites/Projects/test/nuxt-app/node_modules/.pnpm/@[email protected]_@[email protected]/node_modules/@firebase/auth/src/core/util/assert.ts:280:9)
    at debugAssert (file:///Users/chrisspiegl/Sites/Projects/test/nuxt-app/node_modules/.pnpm/@[email protected]_@[email protected]/node_modules/@firebase/auth/src/core/util/assert.ts:295:5)
    at _getInstance (file:///Users/chrisspiegl/Sites/Projects/test/nuxt-app/node_modules/.pnpm/@[email protected]_@[email protected]/node_modules/@firebase/auth/src/core/util/instantiator.ts:34:3)
    at AuthImpl._initializeWithPersistence (file:///Users/chrisspiegl/Sites/Projects/test/nuxt-app/node_modules/.pnpm/@[email protected]_@[email protected]/node_modules/@firebase/auth/src/core/auth/auth_impl.ts:149:37)
    at _initializeAuthInstance (file:///Users/chrisspiegl/Sites/Projects/test/nuxt-app/node_modules/.pnpm/@[email protected]_@[email protected]/node_modules/@firebase/auth/src/core/auth/initialize.ts:86:8)
    at Component.instanceFactory (file:///Users/chrisspiegl/Sites/Projects/test/nuxt-app/node_modules/.pnpm/@[email protected]_@[email protected]/node_modules/@firebase/auth/src/core/auth/register.ts:94:9)
    at Provider.getOrInitializeService (file:///Users/chrisspiegl/Sites/Projects/test/nuxt-app/node_modules/.pnpm/@[email protected]/node_modules/@firebase/component/src/provider.ts:318:33)
    at Provider.initialize (file:///Users/chrisspiegl/Sites/Projects/test/nuxt-app/node_modules/.pnpm/@[email protected]/node_modules/@firebase/component/src/provider.ts:242:27)
    at initializeAuth (file:///Users/chrisspiegl/Sites/Projects/test/nuxt-app/node_modules/.pnpm/@[email protected]_@[email protected]/node_modules/@firebase/auth/src/core/auth/initialize.ts:66:25)
    at _VueFireAuthInit (file:///Users/chrisspiegl/Sites/Projects/test/nuxt-app/node_modules/.pnpm/[email protected][email protected][email protected][email protected]/node_modules/vuefire/dist/index.mjs:1060:79)

stdout | createSuspenseBoundary (/Users/chrisspiegl/Sites/Projects/test/nuxt-app/node_modules/.pnpm/@[email protected]/node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:6757:43)
<Suspense> is an experimental feature and its API will likely change.

 ❯ tests/nuxt/smoke.test.ts (2)
 ❯ tests/nuxt/smoke.test.ts (2)
 ✓ tests/nuxt/smoke.test.ts (2) 14154ms
   ✓ smoke testing browser loads (2) 576ms
     ✓ $fetch
     ✓ playwright 496ms

 Test Files  1 passed (1)
      Tests  2 passed (2)
   Start at  16:15:53
   Duration  14.90s (transform 151ms, setup 312ms, collect 120ms, tests 14.15s, environment 66ms, prepare 127ms)


 PASS  Waiting for file changes...

[halws]

@chrisspiegl Did you managed to overcome this?

[chrisspiegl]

@halws have you seen the same? I postponed testing for a while because of different focus in our project.

[halws]

@chrisspiegl yes I do see it.

What I've noticed after experiments

1. it relates specifically to @nuxt/test-utils and vuefire. When you use @vue/test-utils instead, the error is not appearing. But then you cannot test your files because of nuxt's autoimport 🤦
2. I've managed to overcome issue accidentally, by turning off popupRedirectResolver

  vuefire: {
    emulators: false,
    auth: {
      enabled: true,
      sessionCookie: true,
      errorMap: 'debug',
      // disable the poupup redirect resolver dependency
      popupRedirectResolver: false,
      // persistence: ['indexedDBLocal'],
    },
    config: {
    },
  },

It's a hacky solution, because you're disabling the feature

The popupRedirectResolver option in Firebase Authentication is used to specify how the authentication process should handle redirects and popups. This is particularly relevant for OAuth providers like Google, Facebook, etc., where the authentication flow might involve redirecting the user to the provider's login page and then back to your application.

Default Behavior ('browser')
When popupRedirectResolver is set to 'browser' (the default), Firebase Authentication uses the browser's built-in mechanisms to handle redirects and popups. This is generally the most straightforward and compatible option for most web applications.

Disabling (false)
Setting popupRedirectResolver to false disables the popup and redirect handling. This might be useful in scenarios where you want to handle the authentication flow entirely within your application without relying on the browser's default behavior.

[losbeekos]

I'm running into this as well and use a environment override in my nuxt.config.ts for the temp fix @halws mentioned, because I need the popup enabled in my app.

$test: {
  vuefire: {
    auth: {
      popupRedirectResolver: false,
    },
  },
}