Search code examples
typescriptfirebaseserver-side-renderingfirebase-adminvite

How to configure vite/rollup to exclude firebase-admin from my clientside code?


I've been using this vite-plugin-ssr with firebase functions happily until one day firebase-admin bailed on me. My setup was working until I deleted my node modules and reinstalled my dependencies. It seems that vite is bundling firebase-admin with the client even though there are no imports in clientside code referring to firebase-admin, only in the .page.server.ts files. How do I specify to vite or rollup to not bundle firebase-admin into the dist/client directory?

I would really appreciate some pointers... I've spent 24hrs + on this one issue and at this point I am considering switching the SSR off, or copying the files to a fresh project. Basically I just want a clean setup with this simple stack:

  • firebase functions
  • vite + SSR (using vite-plugin-ssr)
  • preact and typescript
> vite build "--config" "vite-ssr.config.ts"

node_modules/@firebase/util/node_modules/tslib/tslib.es6.js'fast-crc32c' is imported by fast-crc32c?commonjs-external, but could not be resolved – treating it as an external dependency
transforming (2472) 
✓ 2478 modules transformed.
'default' is not exported by node_modules/firebase/app/dist/index.esm.js, imported by node_modules/firebase-admin/node_modules/@firebase/database/dist/index.esm.js
file: /Users/mateh/github/control-me/web-app/node_modules/firebase-admin/node_modules/@firebase/database/dist/index.esm.js:1:7
1: import firebase from 'firebase/app';
          ^

Things I have tried:

  • Updated to the lasest version of all the firebase related dependencies
  • Tried enabling allowSyntheticDefaultImports in tsconfig, did not make a difference
  • manually edit the file in node_modules to import * from '@firebase/app'. The build will pass this way but the client will not be able to use the fast-crc32c module.
  • installed fast-crc32c module to no avail, there is a generic Object is undefined error somewhere in firebase-admin code, obviously it's not meant to be run on the clientside in the browser.
  • Both functions and the client has the same set of dependencies. Next, I tried to alias it with rollup so that only firebase is installed on the clientside package.json and only firebase-admin is in the serverside functions package.json, issue still persists.

Solution

  • Adding this to my vite configuration fixed it:

    build: {
        rollupOptions: {
          external: ['firebase-admin'],