Using Firestore with Snowpack

[acoyfellow]

I'm having an issue using snowpack + firestore together. I can't seem to import the firebase/firestore library, no matter what kind of snowpack config I'm using. [email protected], snowpack@^3.0.10

Error I see:
Uncaught (in promise) TypeError: Failed to resolve module specifier "process". Relative references must start with either "/", "./", or "../".

• i'm only importing this on the client side, in an onMount. seems to be still picking up the firestore node version?

I've tried setting packageOptions.polyfillNode to true, and even using packageOptions.rollup.plugins require('rollup-plugin-node-polyfills')({ process: true }) and require("rollup-plugin-node-globals")() - to no avail

Any pointers on how to debug this?

edit: i've tried importing the firestore files all sorts of ways too

import "firebase/firestore"; // reccomended in docs
import "@firebase/firestore"; // this file exists, idk why
import "firebase/firestore/dist/index.esm"; // to be sure to call on the client not node version

[acoyfellow]

I think i solved my own issue - no bug per-say.. but if you have the wrong setup, snowpack pulls in the server version of firestore.

Then: it gets cached.

if you have a setup that you think should be working but it isn't, try clearing the node_modules/.cache

[FredKSchott]

Oh interesting, what was it that you changed that wasn't picked up by our stale cache? We can look into fixing this!

[acoyfellow]

I'm being "bad" and using @sveltejs/kit before it's released. I upgraded from 1.0.0-next.1 to 1.0.0-next.25 - which included the snowpack 3.0 upgrade.

Using the default snowpack config wasn't working - so i updated snowpack.config.js > packageOptions.external to exclude "process":

module.exports = {
  packageOptions: {
    knownEntrypoints: ['svelte'],
    external: [
      ...require('module').builtinModules.filter(m => m !== 'process'),
      ...Object.keys(pkg.dependencies || {})
    ],
  },
  plugins: [
    [
      '@snowpack/plugin-svelte',
      {
        compilerOptions: {
          hydratable: true
        }
      }
    ],
    [
      '@snowpack/plugin-build-script',
      {
        cmd: "postcss",
        input: [".css", ".pcss"],
        output: [".css"],
      }
    ],
  ],
  devOptions: {
    open: 'none',
    output: 'stream'
  },
  buildOptions: {
    sourcemap: true
  },
  mount: {
    '.svelte/assets': `/${process.env.SVELTE_KIT_APP_DIR}/assets`,
    'src/components': '/_components',
    'src/services': '/_services',
  },
  alias: {
    $app: './.svelte/assets/runtime/app',
    $components: './src/components',
    $services: './src/services',
  }
};

[mankins]

I'm trying to do the same. I had this working prior to 3.0, but even following the above I get:

Error: Import "firebase/firestore" could not be resolved.
If this import doesn't exist in the source file, add "knownEntrypoints": ["firebase/firestore"] to your Snowpack config "packageOptions".

Which I do: in snowpack.config.js

  packageOptions: {
    knownEntrypoints: ["svelte", "firebase/app", "firebase/firestore"],
    external: [
      ...require("module").builtinModules.filter((m) => m !== "process"),
    ],
  },

but I get the same error.

Incidentally if I remove firebase completely I get the same error with stripe-js ... so maybe this is something other than the above?

I started a new discussion here in case that's unrelated to the above.