[Webpack issue] Server-Only Firebase Admin SDK

So I've got a plugin in the making, to help with some of my common use cases for Firebase and to perhaps help other people.

But I'm really struggling with setting up Webpack and the Firebase Admin SDK (which won't run in browser) with Aliases etc.

I've studied how other plugins have done it, and most seem to just use aliases to magically get server-only sdks to work. Like the official stripe plugin.

I've tried adding the modules as Externals per someones tip, which looks reasonable (

) - but I still get "firebase is not defined, which I guess is a peer dep from firebase-admin" .

I'm not sure this is the right way.

externals: {
            firebase: "firebase",
            "firebase-admin": "firebase-admin",
            "firebase-admin/app": "firebase-admin/app",
            "firebase-admin/messaging": "firebase-admin/messaging",
}

I've also gone with the approach that many other seem to have done and added aliases in different ways. Both using

to the plugin and mocking it with an empty object.

So what I have now is something that looks like this;

alias: {
              ...config.resolve.alias,
              firebase: mockPath,
              "firebase-admin": mockPath,
              "firebase-admin/app": mockPath,
              "firebase-admin/messaging": mockPath,
            },
            fallback: {
              ...config.resolve.fallback,
              fs: false,
              tls: false,
              net: false,
              zlib: false,
              http: false,
              https: false,
              crypto: false,
              os: false,
              request: false,
              "crypto-browserify": false,
              url: require.resolve("url"),
              "os-browserify": false,
              querystring: false,
              buffer: false,
              constants: false,
              child_process: false,
            },

Images:

: "Uncaught Reference error: firebase is not defined":

: the Cannot resolve 'firebase-admin' in the plugins folder

I just think I'm missing something.

Since it looks like it compiles but it's referencing the

modules from the projects plugin folder, not node_modules.

So I got it to run. I ended up creating a file that checks if it's browser or node and requires the right package depending on where it's run.

So I powered on and tried to initialize things and require the service account credentials, and suddenly I'm getting:

defaults.js:20 Uncaught TypeError: path_1.default.resolve is not a function
    at ./node_modules/payload/dist/config/defaults.js (defaults.js:20:1)
    at __webpack_require__ (bootstrap:24:1)
    at fn (hot module replacement:62:1)
    at fn (hot module replacement:62:1)
    at ./node_modules/payload/dist/config/sanitize.js (sanitize.js:13:20)
    at __webpack_require__ (bootstrap:24:1)
    at fn (hot module replacement:62:1)
    at fn (hot module replacement:62:1)
    at ./node_modules/payload/dist/config/build.js (build.js:7:36)
    at __webpack_require__ (bootstrap:24:1)

Any ideas where I should start looking for issues?

See my later post "WEBPACK_IMPORTED_MODULE_7.default for the answer