Firebase v9.0.1 with Sveltekit node adapter – build failure

[kenkunz]

[REQUIRED] Describe your environment

• Operating System version: macOS 11.5.2
• Browser version: n/a
• Firebase SDK version: 9.0.1 (and newer)
• Firebase Product: firestore

[REQUIRED] Describe the problem

I am using Firebase (auth and firestore) in a Sveltekit project. It has been building and running successfully until I recently tried to upgrade. I was able to isolate the error to 9.0.1 (more specifically: firestore 3.0.1).

I created a minimal app to identify what dependencies/versions are required in order to reproduce the issue. This occurs when building any recent version of Sveltekit with the node adapter. Using an older version of Sveltekit or the node adapter does not resolve the problem. Only by reverting to Firebase 9.0.0 (firestore 3.0.0) was it resolved, which is why I believe the issue is with Firebase / Firestore.

Steps to reproduce:

1. Create a skeleton Sveltekit app:

   $ npm init svelte@next sveltekit-firebase
   > Skeleton project
   > No Typescript
   > No ESLint
   > No Prettier
   

2. Install additional dependencies (firebase and @sveltejs/adapter-node)

   $ cd sveltekit-firebase
   $ npm i -P firebase@9.0.1
   $ npm i -D @sveltejs/adapter-node@next
   

3. Edit svelte.config.js and src/routes/index.svelte to import/use the two dependencies (see below)
4. Build the project

   $ npm run build
   

5. Note the build errors (see example error output below)
6. Revert firebase to 9.0.0 and build again

   $ npm i -P firebase@9.0.0
   $ npm run build
   

7. Note the build succeeds

Relevant Code:

./svelte.config.js

/** @type {import('@sveltejs/kit').Config} */
import nodeAdapter from "@sveltejs/adapter-node";

const config = {
  kit: {
    adapter: nodeAdapter(),
    // hydrate the <div id="svelte"> element in src/app.html
    target: "#svelte",
  },
};

export default config;

./src/routes/index.svelte

<script>
  import { getFirestore } from "firebase/firestore";
</script>

<h1>Welcome to SvelteKit</h1>
<p>Visit <a href="https://kit.svelte.dev">kit.svelte.dev</a> to read the documentation</p>

Resulting Error Output

> .svelte-kit/output/server/app.js:11276:14: warning: Using direct eval with a bundler is not recommended and may cause problems (more info: https://esbuild.github.io/link/direct-eval)
    11276 │     var mod = eval("quire".replace(/^/, "re"))(moduleName);
          ╵               ~~~~

> Cannot read property 'prototype' of undefined
TypeError: Cannot read property 'prototype' of undefined
    at file:///Users/ken/Code/sandbox/sveltekit-firebase/.svelte-kit/output/server/app.js:12359:56
    at ModuleJob.run (node:internal/modules/esm/module_job:183:25)
    at async Loader.import (node:internal/modules/esm/loader:178:24)
    at async prerender (file:///Users/ken/Code/sandbox/sveltekit-firebase/node_modules/@sveltejs/kit/dist/chunks/index5.js:121:14)
    at async Object.prerender (file:///Users/ken/Code/sandbox/sveltekit-firebase/node_modules/@sveltejs/kit/dist/chunks/index5.js:352:4)
    at async adapt (file:///Users/ken/Code/sandbox/sveltekit-firebase/node_modules/@sveltejs/adapter-node/index.js:105:4)
    at async adapt (file:///Users/ken/Code/sandbox/sveltekit-firebase/node_modules/@sveltejs/kit/dist/chunks/index5.js:377:2)
    at async file:///Users/ken/Code/sandbox/sveltekit-firebase/node_modules/@sveltejs/kit/dist/cli.js:877:5

[thebrianchen]

@kenkunz Thanks for filing the detailed repro! I was able to reproduce the issue. Not sure what's happening here, but I'll report back after playing around with it some more.

[kenkunz]

@thebrianchen great, thanks for the update!

[mdeborde]

I was having a similar problem, 9.0.0 builds fine, 9.0.2 throws an error with tslib not being able to find default. I think it is an ES6 module issue with tslib.... lots of research... no answer.... switching back to 9.0.0 seems to work for now.

Error: Build failed with 1 error:
.svelte-kit/output/server/app.js:23:7: error: No matching export in "node_modules/tslib/modules/index.js" for import "default"

[hsubox76]

We added an exports field to package.json in 9.0.1 to better work with Node bundlers, which has only node and default options. The node entry points at a cjs build, so that's what Svelte is picking up. This excerpt on Svelte's FAQ page seems to indicate it tries to convert the cjs build to an esm build using esbuild and something is going wrong there.

https://kit.svelte.dev/faq

Svelte components must be written entirely in ESM. It is encouraged to make sure the dependencies of Svelte components provide an ESM version. However,in order to handle CJS dependencies vite-plugin-svelte will look for any CJS dependencies and ask Vite to pre-bundle them by automatically adding them to Vite's optimizeDeps.include which will use esbuild to convert them to ESM.

We can just provide an esm Node build to avoid this, we just need to figure out what field to put it in, and look into what we need to do to make sure the exports object is structured in a way that works for all bundlers/frameworks.

[kenkunz]

@hsubox76 thanks for the update.

Finding the cause is often 90% of the battle! Hope the solution is as straightforward as it sounds.

I appreciate the Firebase team's support on this!

[kilianso]

Having the same issue with latest Sveltekik, static-adapter and Firebase 9.1.1. Interestingly, it seems that only the firestore module breaks the build. I can import app and auth in a regular fashion and call them in Svelte files without any issues. But everything from firestore needs to be loaded using dynamic imports.

[hsubox76]

There is a PR to fix this, but it will involve dropping Node 8 support, so we're making sure we can do that: #5532

[kenkunz]

@hsubox76 thanks for the update.

My 2¢… seems pretty reasonable to sunset support for an EOL'd node version (since Dec 2019) in your new SDK version :)

[kenkunz]

Thanks for addressing this, @hsubox76 💯!

Will keep my eyes open for the next release 🚀