bug(core): Webpack error when running cypress tests with cypress-firebase

[BoisonChang]

I am writing cypress e2e tests for my nextjs web app, which uses firebase on the back end. I have followed the guide in the docs for setting it up using the cypress-firebase package (https://www.npmjs.com/package/cypress-firebase), but I am getting an error relating to webpack:

a problem like in this stackoverflow and it seems not only I met this problem.

https://stackoverflow.com/questions/75035705/webpack-error-when-running-cypress-tests-with-cypress-firebase

error

Webpack Compilation Error
./node_modules/cypress-firebase/lib-esm/plugin.js 18:27
Module parse failed: Unexpected token (18:27)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| export default function pluginWithTasks(cypressOnFunc, cypressConfig, adminInstance, overrideConfig) {
|     // Only initialize admin instance if it hasn't already been initialized
>     if (adminInstance.apps?.length === 0) {
|         initializeFirebase(adminInstance, overrideConfig);
|     }

it is my project setting below:

import firebase from 'firebase/compat/app';
import 'firebase/compat/auth';
import 'firebase/compat/database';
import 'firebase/compat/firestore';
import { attachCustomCommands } from 'cypress-firebase';


const fbConfig = {
  apiKey: process.env.NEXT_PUBLIC_FIREBASE_API_KEY,
  authDomain: process.env.NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN,
  projectId: process.env.NEXT_PUBLIC_FIREBASE_PROJECT_ID,
  storageBucket: process.env.NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET,
  messagingSenderId: process.env.NEXT_PUBLIC_FIREBASE_MESSAGIMG_SENDER_ID,
  appId: process.env.NEXT_PUBLIC_FIREBASE_APP_ID,
  measurementId: process.env.NEXT_PUBLIC_FIREBASE_MEASUREMENT_ID,
};

firebase.initializeApp(fbConfig);

attachCustomCommands({ Cypress, cy, firebase });

import admin from "firebase-admin";
import { defineConfig } from "cypress";
import { plugin as cypressFirebasePlugin } from "cypress-firebase";

export default defineConfig({
  e2e: {
    baseUrl: "http://localhost:3000",
    setupNodeEvents(on, config) {
      return cypressFirebasePlugin(on, config, admin);
      // e2e testing node events setup code
    },
    viewportWidth: 1440,
    viewportHeight: 1029,
  },
  env: {
    apiUrl: "https://stage.wegoing.io/app",
  },
});

It can work if I downgrade to 2.x.x, but this version banning some firebase URL is lawful now.

so it is annoying to make me unable to use this plugin pending my e2e test.

[IslamicProgrammer]

Did you find the solution ?

[caiooliveirasherpa]

I downgraded to 2.2.5 and it worked
@IslamicProgrammer @BoisonChang

[BoisonChang]

Did you find the solution?

nope, same problem.

You can fix it by downgrading it.

However, the old version cannot be compatible with my RTB Database firebase URL.

XXXXrtdb.asia-southeast1.firebasedatabase.app/

the old version is just compatible with XXX.io no XXX.app

[Siegrift]

I am not sure why esm version of the library is used with the imports. I've tried importing from cypress-firebase/lib explicitly, but that failed for the same reason. Cypress uses Webpack under the hood, but it seems it still uses v4 which does not have support for optional chaining...

I tried to fix this with on('file:preprocessor', ... but failed.
I think the fix should be to release a version of this package built for lower target (without the optional chaining)

[Siegrift]

Actually, I found I workaround using https://github.com/bahmutov/cypress-esbuild-preprocessor
But be sure to install esbuild version ^0.16.7, because 0.17.0 has breaking changes.

[IslamicProgrammer]

I downgraded to 2.2.5 and it worked for me as well

[ComradeAERGO]

Actually, I found I workaround using https://github.com/bahmutov/cypress-esbuild-preprocessor But be sure to install esbuild version ^0.16.7, because 0.17.0 has breaking changes.

Also, version 2.2.0 of @bahmutov/cypress-esbuild-preprocessor breaks, works only with 2.1.5

[darrelfrancis]

However, the old version cannot be compatible with my RTB Database firebase URL.

XXXXrtdb.asia-southeast1.firebasedatabase.app/

the old version is just compatible with XXX.io no XXX.app

Hi @BoisonChang

I had the same problem with XXXXrtdb.europe-west1.firebasedatabase.app/

I have solved it and updated the docs (see the comments in the code below). You and I must explicitly give our database URLs because they are not at XXX.firebaseio.com.

export default defineConfig({
  e2e: {
    baseUrl: 'http://localhost:3000',
    // NOTE: Add "supportFile" setting if separate location is used
    setupNodeEvents(on, config) {
      // e2e testing node events setup code
      return cypressFirebasePlugin(on, config, admin,{
          // Here is where you can pass special options. 
          // If you have not set the GCLOUD_PROJECT environment variable, give the projectId here, like so:
          //    projectId: 'some-project',
          // if your databaseURL is not just your projectId plus ".firebaseio.com", then you _must_ give it here, like so:
          //    databaseURL: 'some-project-default-rtdb.europe-west1.firebasedatabase.app',
      });
    },
  },
});

[codeams]

Had the same issue – had to downgrade to 2.2.5 to make it work.

Adding esbuild just because of cypress-firebase doesn't feel right.

[Tockra]

The current version is still broken...