Cloud Firestore v9 build error with preact-cli

[jaksm]

What is the current behaviour?
CLI throws error when dev or build script are used with the new Firebase SDK v9.

Error output:

$ npm run build

> webapp@0.0.0 build
> preact build

 Build  [==                  ] 12% (1.3s) building(13200:6) switch-case fall-through not supported - added break. See https://github.com/MatAtBread/nodent#differences-from-the-es7-specification
[BABEL] Note: The code generator has deoptimised the styling of ../node_modules/@firebase/firestore/dist/exp/index.browser.esm2017.js as it exceeds the max of 500KB.
✖ ERROR ../node_modules/@firebase/firestore/dist/exp/index.browser.esm2017.js 5055:431
Module parse failed: Unsyntactic break (5055:431)
File was processed with these loaders:
 * ../node_modules/babel-loader/lib/index.js
You may need an additional loader to handle the result of these loaders.
(Source code omitted for this binary file)
 @ ../node_modules/firebase/firestore/dist/index.esm.js 1:0-36 1:0-36
 @ ./components/app.tsx
 @ ./index.ts

Read more about this bug on SO: https://stackoverflow.com/questions/67350610/cloud-firestore-build-error-with-preact-cli.
Even though I'm not the creator of this SO question I see the exact same error.

Steps to Reproduce
Steps to reproduce the behavior:

1. Create a blank project with preact-cli
2. Follow the instructions on how to add Firebase v9 to the project
3. Run dev or build scripts
4. See error

What is the expected behaviour?
Preact CLI should work smoothly with new version of Firebase especially if it aims to reduce bundle size.

Please mention any other relevant information
Make sure to read comments in the mentioned SO question, especially the one from DrYap.

Environment Info:
  System:
    OS: macOS 11.4
    CPU: (16) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
  Binaries:
    Node: 16.6.2 - /var/folders/26/tlzqz_2d4cx3wr1f8w4ns_ww0000gp/T/yarn--1629174442990-0.9348698159252729/node
    Yarn: 1.22.10 - /var/folders/26/tlzqz_2d4cx3wr1f8w4ns_ww0000gp/T/yarn--1629174442990-0.9348698159252729/yarn
    npm: 7.20.3 - /usr/local/bin/npm
  Browsers:
    Chrome: 92.0.4515.131
    Safari: 14.1.1
  npmPackages:
    preact: ^10.3.1 => 10.5.14 
    preact-cli: ^3.0.0 => 3.2.2 
    preact-render-to-string: ^5.1.4 => 5.1.19 
    preact-router: ^3.2.1 => 3.2.1 

[peterbe]

I'm not sure this is of much help but @developit helped me on Slack about this. He suggested your remove the fast-async Babel plugin by creating your own/new preact.config.js.

// Origins of this is @developit helping me solve this problem:
// https://github.com/firebase/firebase-js-sdk/issues/5492

export default (config, env, helpers) => {
  const { rule } = helpers.getLoadersByName(config, "babel-loader")[0];
  const babelConfig = rule.options;
  const index = babelConfig.plugins.findIndex((x) => {
    if (Array.isArray(x)) {
      return /fast-async/.test(x[0]);
    }
    if (typeof x === "string") {
      return /fast-async/.test(x);
    }
    console.warn(`Not sure how to deal with type ${typeof x} (${x})`);
    return false;
  });
  if (index !== -1) {
    console.debug("Removing babelConfig", babelConfig.plugins[index]);
    babelConfig.plugins.splice(index, 1);
  }

  return config;
};

That got me past the same error you were getting.

But after applying this config, I seem to have broken my webpack config terrible. Now I'm getting: Uncaught ReferenceError: process is not defined when loading the app in the browser.
It happens because I used process.env.PREACT_APP_FIREBASE_DATABASEURL (etc) inside the app.tsx and the poor browser has no idea what this process global is and that's something Webpack's supposed to have fixed but I think my config above broke something.

UPDATE

Adding that babelConfig trick does work and the reason I was getting other errors was because I foolishly overwrote my old preact.config.js. I only noticed it when I typed git status and found out that I already had my own preact.config.js which did the envVar plugin thing.
In short, I'm now using latest and greatest of firebase and preact-cli and it's working.

[rschristian]

@peterbe You can use DefinePlugin to set those values. See config recipes