Pre-render 'Template execution failed' when importing Firebase Auth v9

[rejhgadellaa]

What is the current behaviour?

I'm working on a project that uses Firebase v9 and I'm getting an error when I run npm run build:

× ERROR Template execution failed: SyntaxError: Function statements require a function name

The error is thrown in prerender.js @ line 18:

let m = require(entry),

When I check the ./ssr-build/ssr-bundle.js it's trying to require, I can see the syntax error.

To be honest, I'm not sure if this is the right project to file this issue. It looks like it's Terser messing up the ssr-bundle.js or maybe it's Firebase's auth module that has some syntax that causes Terser to mess up, etc, but I guess I have to start filing the issue somewhere :)

Steps to Reproduce

Steps to reproduce the behavior:

1. Create a new project: npx preact-cli create default my-project
2. Install firebase v9: npm i firebase (note: I have the latest 9.6.1 version)
3. Import { getAuth } from 'firebase/auth' in src/routes/Home/
4. Run npm run build

I've included a zip of a project that I created using these steps.

1. Download the zip (attached)
2. Run npm install && npm run build

firebase-auth-ssr-minimize-error--zip.zip

What is the expected behaviour?

ssr-bundle.js should not contain a javascript syntax error causing the build to fail.

Please mention any other relevant information

• The project builds fine with --no-prerender
• The project builds fine when I disable minification in preact.config.js: config.optimization.minimize = false;

Both the 'modular' v9 as the 'compat' version of Firebase Auth causes the error:

// This:
import { getAuth } from 'firebase/auth';

// Same as:
import firebase from 'firebase/compat/app';
import 'firebase/compat/auth';

npx preact-cli info:

Environment Info:
  System:
    OS: Windows 10 10.0.19044
    CPU: (8) x64 Intel(R) Core(TM) i7-1065G7 CPU @ 1.30GHz
  Binaries:
    Node: 14.16.1 - C:\Program Files\nodejs\node.EXE
    npm: 6.14.15 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Edge: Spartan (44.19041.1266.0), Chromium (96.0.1054.62)
  npmPackages:
    preact: ^10.3.2 => 10.6.4
    preact-cli: ^3.0.0 => 3.3.3
    preact-render-to-string: ^5.1.4 => 5.1.19
    preact-router: ^3.2.1 => 3.2.1

[Navbryce]

I also ran into a similar issue on preact-cli 3.3.3, but the following steps seemed to fix it:

1. I upgraded to preact-cli 3.3.5. I got a new error message (see bottom of post), which led to the fix
2. I used to have export const analytics = getAnalytics(app). I switched it to export const analytics: Promise<Analytics | null> = (async () => { return await isSupported() ? getAnalytics(app) : null; })();

I use firebase auth as well, but that doesn't seem to be causing any problems (anymore?).

@firebase/analytics: Analytics: Firebase Analytics is not supported in this environment. 
Wrap initialization of analytics in analytics.isSupported() to prevent initialization in unsupported environments. Details: (1) Cookies are not available. (analytics/invalid-analytics-context).
Unable to read file: {APP PATH}/src/src/helpers.ts

ReferenceError: window is not defined
method: null
at: {APP PATH}/src/src/helpers.ts:58:20

Source code:

[rschristian]

Sorry, are you saying the error message changed upon upgrading preact-cli to v3.3.5 / past 3.3.3?

Makes sense that Firebase may not be suitable in Node when we prerender, but the new error message sounds odd to me. Nothing we've touched should've changed that I don't believe.

Glad it's working regardless.

[Navbryce]

Sorry, are you saying the error message changed upon upgrading preact-cli to v3.3.5 / past 3.3.3?

Makes sense that Firebase may not be suitable in Node when we prerender, but the new error message sounds odd to me. Nothing we've touched should've changed that I don't believe.

Glad it's working regardless.

That's what I thought. I was being a bit presumptuous though. I made several changes before re-running the build command and assumed it was the preact-cli version upgrade that changed the build error message. It appears what changed the error message was the deletion of a single line, removal of firebaseui from the app:

const app = firebase.initializeApp(firebaseConfig);
const analytics = getAnalytics(app);
export const ui = new firebaseui.auth.AuthUI(firebase.auth());

outputs
✖ ERROR Template execution failed: SyntaxError: Function statements require a function name

const app = firebase.initializeApp(firebaseConfig);
const analytics = getAnalytics(app);

switches the message to the new and more detailed one in my comment above.

[rschristian]

Gotcha! Just needed a sanity check as I couldn't imagine how an error message would change given our past few changes here. That would probably indicate something got touched that shouldn't have.

Need to take some time and think of how we can improve the error messages a bit, as this is... less than clear. Glad there's a solution for it though! Appreciate you writing this.