Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Firebase v9.0.1 with Sveltekit node adapter – build failure #5499

Closed
kenkunz opened this issue Sep 15, 2021 · 9 comments · Fixed by #5532
Closed

Firebase v9.0.1 with Sveltekit node adapter – build failure #5499

kenkunz opened this issue Sep 15, 2021 · 9 comments · Fixed by #5532
Assignees
@thebrianchen
Labels
api: firestore

Comments

@kenkunz
Copy link

kenkunz commented Sep 15, 2021

[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 [email protected]
$ 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 [email protected]
$ 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 thebrianchen self-assigned this Sep 17, 2021
@thebrianchen
Copy link

@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
Copy link
Author

kenkunz commented Sep 22, 2021

@thebrianchen great, thanks for the update!

@mdeborde
Copy link

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"

@mdeborde mdeborde mentioned this issue Sep 22, 2021
Closed
@hsubox76
Copy link
Contributor

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
Copy link
Author

kenkunz commented Sep 22, 2021

@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!

@hsubox76 hsubox76 mentioned this issue Sep 22, 2021
Merged
@wiesson wiesson mentioned this issue Oct 5, 2021
Open
@kilianso
Copy link

kilianso commented Oct 6, 2021 •
edited
Loading

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
Copy link
Contributor

hsubox76 commented Oct 6, 2021

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
Copy link
Author

kenkunz commented Oct 6, 2021

@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 kenkunz mentioned this issue Oct 13, 2021
Closed
@kenkunz
Copy link
Author

kenkunz commented Oct 19, 2021

Thanks for addressing this, @hsubox76 💯!

Will keep my eyes open for the next release 🚀

This was referenced Oct 19, 2021
Merged
Merged
@firebase firebase locked and limited conversation to collaborators Nov 19, 2021
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees

@thebrianchen thebrianchen

Labels
api: firestore
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

Fix Firestore exports for Node firebase/firebase-js-sdk
6 participants
@kenkunz @mdeborde @thebrianchen @hsubox76 @kilianso @google-oss-bot