Description
[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>