[Webpack issue] Server-Only Firebase Admin SDK

default discord avatar
sawariz0r
3 months ago
4

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.



Externals

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

firebase-admin, firebase-admin/app, firebase-admin/messaging

) - 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",
}


Aliases

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

path

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:


Externals

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



Aliases/Fallbacks

: 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

firebase-admin

modules from the projects plugin folder, not node_modules.



Update

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

    Open the post
    Continue the discussion in Discord
    Like what we're doing?
    Star us on GitHub!

    Star

    Connect with the Payload Community on Discord

    Discord

    online

    Can't find what you're looking for?

    Get help straight from the Payload team with an Enterprise License.