[REQUIRED] Describe your environment

• Operating System version: all
• Browser version: any
• Firebase SDK version: 9
• Firebase Product: messaging. probably others

[REQUIRED] Describe the problem

@Feiyang1 thanks for your efforts to improve packaging by adding exports to all package.json files (#5646). Unfortunately, I didn't catch this when reviewing that PR, but I'm afraid there's still an issue.

The file extensions are incompatible with Node. You must use .mjs for the ESM files (or set "type": "module" and use .cjs for the CJS files): https://nodejs.org/api/packages.html#determining-module-system

This bug was originally filed in the SvelteKit project (sveltejs/kit#3083), but it's really an issue with the way Firebase is packaged. Vite will try to load Firebase directly using the Node APIs and will fail. It may work if you use a bundler like Webpack because the bundlers will transform the code to be valid before trying to run it, but Vite will try to run the code directly during SSR and will fail as a result.

Steps to reproduce:

Try to load @firebase/messaging from a Node app without bundling and it will fail

Run npm install followed by npm run build in this project: https://github.com/sacrosanctic/test-static-messaging

You will get the error:

SyntaxError: Named export 'onBackgroundMessage' not found. The requested module '@firebase/messaging/sw' is a CommonJS module, which may not support all module.exports as named exports.

@firebase/messaging/sw is not CommonJS, but rather it's ESM. However, Node doesn't know that since there is neither "type": "module" nor an .mjs extension.

Relevant Code:

import "firebase/compat/messaging"