Skip to content

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

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

    pFad - Phonifier reborn

    Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

    Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


    Alternative Proxies:

    Alternative Proxy

    pFad Proxy

    pFad v3 Proxy

    pFad v4 Proxy