Skip to content

package.json exports should include "browser" for @firebase/firestore #6414

@aalakoski

Description

@aalakoski

[REQUIRED] Describe your environment

  • Operating System version: MacOs BigSur 11.6
  • Browser version: Chrome Version 102.0.5005.115 (Official Build) (x86_64)
  • Firebase SDK version: 9.8.4
  • Firebase Product: firestore

[REQUIRED] Describe the problem

the import { getFirestore} from 'firebase/firestore/lite' (and firebase/firestore) will result in a following error:

Uncaught TypeError: Cannot read properties of undefined (reading 'stringify') which point to the index.esm2017.js:27 file.

I'm trying to use Firestore with Svelte (v.3.0.0) with Typescript and Rollup config. In my rollup.config.js I have:

...
resolve({
      browser: true,
      dedupe: ['svelte'],
})
...

I believe this is due to incorrect export configuration and mainly them missing the "browser" diist destination.

When you add the following line to node_modules/@firebase/firestore/package.json everything works and the build does not crash for the import:

...
"exports": {
    ".": {
      "types": "./dist/index.d.ts",
      "node": {
        "require": "./dist/index.node.cjs.js",
        "import": "./dist/index.node.mjs"
      },
      "react-native": "./dist/index.rn.js",
      "esm5": "./dist/index.esm5.js",
      "default": "./dist/index.esm2017.js"
    },
    "./lite": {
      "types": "./dist/lite/index.d.ts",
      "node": {
        "require": "./dist/lite/index.node.cjs.js",
        "import": "./dist/lite/index.node.mjs"
      },
      "react-native": "./dist/index.rn.js",
      "esm5": "./dist/index.esm5.js",
      "browser": "./dist/lite/index.browser.esm2017.js", // <-- added this
      "default": "./dist/index.esm2017.js"
    },
    "./package.json": "./package.json"
  },
...

Steps to reproduce:

Clone / create a new Svelte app with Typescript:
npx degit sveltejs/template firebase-test
cd firebase-test
node scripts/setupTypeScript.js
npm i firebase -D
Add the browser: true option to resolve in rollup.config.js

Start dev server:

npm run dev

When you open your browser with the default served local env http://localhost:8080
You'll see the issue.

Modify the above package.json to include "browser" exports.

restart your dev server with:
npm run dev

No errors in web console.

Relevant Code:

In your App.svelte just import the getFirestore from firebase/firestore/lite

<script lang="ts">
  import { getFirestore } from 'firebase/firestore/lite';
  // some other code
  </script>
  

Metadata

Metadata

Assignees

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions