The requested module is a CommonJS module, which may not support all module.exports as named exports.

[scorsi]

I have trouble using rxfire with SvelteKit using adapter-static. When running in dev mode I don't have any issue but when building my app I go troubles...

First, I import the auth package like that : import { authState } from "rxfire/auth";.
Which gaves me:

import { authState } from "rxfire/auth";
         ^^^^^^^^^
SyntaxError: Named export 'authState' not found. The requested module 'rxfire/auth' is a CommonJS module, which may not support all module.exports as named exports.
CommonJS modules can always be imported via the default export, for example using:

import pkg from 'rxfire/auth';
const { authState } = pkg;

So, I did import * as rxfireauth from "rxfire/auth"; const { authState } = rxfireauth; and...
I got this now:

(node:88773) Warning: To load an ES module, set "type": "module" in the package.json or use the .mjs extension.
(Use `node --trace-warnings ...` to show where the warning was created)
/Users/scorsi/projects/calicut/front/node_modules/rxfire/auth/index.esm.js:1
import { onAuthStateChanged, onIdTokenChanged, getIdToken } from 'firebase/auth';
^^^^^^

SyntaxError: Cannot use import statement outside a module...

The version installed :

• firebase: 9.6.6
• rxfire: 6.0.3

This may be related to #48 but I don't technically use SSR at all :)

Temporary workaround: disabling page prerendering in svelte.config.js (but I lose all interests of using SvelteKit lol):

kit: {
  adapter: adapter({fallback: "index.html"}),
  prerender: {
    enabled: false
  },
},

I can create a repro project next week if needed.

[davideast]

Hey @scorsi! If you could create a small MVCE (minimal, complete and verifiable example) that would be super helpful for debugging purposes. I'm a big SvelteKit fan, so I'm happy to make sure it's a smooth ride.

[fishsticks89]

I have the same issue @scorsi
this was supposedly fixed (issues #17), (PR #23)
you can set "type":"module" in rxfire's package.json files during builds as a temporary fix

Edit:
When using vite ssr I believe that index.esm.js is being required for some reason instead of imported, unrelated to these issues.

[fishsticks89]

@davideast to replicate:

npm init svelte@next my-app # Sveltekit Skeleton project w/ typescript, no eslint or prettier
cd my-app
yarn 
yarn add @sveltejs/adapter-static@next
yarn add rxfire firebase rxjs
sed -i 's/adapter-auto/adapter-static/g' svelte.config.js
echo "<script> import { authState } from 'rxfire/auth'; authState(); </script>" > ./src/routes/index.svelte
yarn build

[evdama]

I've got the exact same issue (rxfire being cjs) trying to use adapter-node with current sveltekit in order to prepare an app I'd like to host on firebase.

[scorsi]

@fishsticks89 thanks for the repro steps !!

[jcouser]

Any updates around this? I was converting to a sveltkit project and am currently running into this problem as well

[simpros]

Me too :(

[simpros]

This is quite a bummer and I have no idea what causes this :(

[konstantinblaesi]

Quick fix: Modify node_modules/rxfire/auth/package.json to look like this

{
  "name": "rxfire/auth",
  "browser": "index.esm.js",
  "main": "index.cjs.js",
  "module": "index.esm.js",
  "typings": "index.d.ts",
  "sideEffects": false,
  "type": "module",
  "exports": {
    "import": "./index.esm.js",
    "require": "./index.cjs.js"
  }
}

Added content

"type": "module",
"exports": {
  "import": "./index.esm.js",
  "require": "./index.cjs.js"
}

This obviously gets overwritten when changing dependencies, so it's not a practical solution. Similar issue discussed by SvelteKit maintainers