#__WEBPACK_IMPORTED_MODULE_7__.default

48 messages · Page 1 of 1 (latest)

celest epoch
#

Can't make sense of this. Been fighting webpack to get it to ignore the server-side sdks 😦
Any ideas where I should be looking?

Screenshot_2023-06-16_at_21.44.58.png
sage iris
#

You can add module aliasing to your webpack config, let me get an example code

#

Essentially the same in for your own config

celest epoch
# 
import path from 'path'
import type { Config } from 'payload/config'
import type { Configuration as WebpackConfig } from 'webpack'

const mockModulePath = path.resolve(__dirname, './../mocks/emptyObject')

export const extendWebpackConfig =
  (config: Config): ((webpackConfig: WebpackConfig) => WebpackConfig) =>
  webpackConfig => {
    const existingWebpackConfig =
      typeof config.admin?.webpack === 'function'
        ? config.admin.webpack(webpackConfig)
        : webpackConfig

    return {
      ...existingWebpackConfig,
      resolve: {
        ...(existingWebpackConfig.resolve || {}),
        cache: false,
        alias: {
          ...(existingWebpackConfig.resolve?.alias ? existingWebpackConfig.resolve.alias : {}),
          [path.resolve(__dirname, './firebaseNotifications')]: mockModulePath,
          [path.resolve(__dirname, './firebase')]: mockModulePath,
        },
        fallback: {
          ...(existingWebpackConfig.resolve?.fallback ? existingWebpackConfig.resolve.fallback : {}),
          stream: false,
          crypto: false,
          tls: false,
          fs: false,
          zlib: false,
          os: false,
          child_process: false,
          net: false,
        }
      },
    }
  }```
sage iris
#

Though your mocks can be just an empty object like

{}
celest epoch
#

Check! Got the mocks module as well

sage iris
#

what does your payload config look like?

celest epoch
#

Webpack looks like it compiles just fine, api works. It's just in the browser where the admin route isn't working

#

Gimme a sec

sage iris
#

Your original error tells me that there's code being shipped to the frontend which is then trying to use the firebaseNotifications default function

celest epoch
# 
// The config from my plugin
const config: Config = {
      ...incomingConfig,
      admin: {
        ...incomingConfig.admin,
        webpack: extendWebpackConfig(incomingConfig),
      },
      collections: incomingConfig.collections.map((collection) => {
        if (collection.slug !== options.messageCollection.slug) {
          return collection;
        }

        return {
          ...collection,
          hooks: {
            ...collection.hooks,
            afterChange: [afterChangeHook],
          },
        };
      }),
    };

// payload.config.ts
admin: {
    user: Users.slug,
    webpack: (config) => ({
      ...config,
      resolve: {
        ...config.resolve,
        alias: {
          ...config.resolve.alias,
          jsonwebtoken: mockPath,
          [verifyTokenMockPath]: mockPath,
        },
        fallback: {
          ...config.resolve.fallback,
          util: false,
          "safe-buffer": false,
          crypto: false,
        },
      },
    }),
  },
sage iris
#

Are you aliasing all files importing firebase?

celest epoch
#

Yup. At this point it's only firebaseNotifications.ts, a firebase.ts (essentially just importing admin in node, client in browser) and extendWebpackConfig.ts

#

No other occurrences or places I import the firebase sdk

sage iris
#

theres no node_modules/.cache/webpack to clear right?

celest epoch
#

Cleared that again for good measure

#

I'll see if I can move them onto a repository, easier to spot obvious errors when it's not just bits of code 🙂

sage iris
#

Yeah that'd be really helpful!

celest epoch
#

So, playing around with the mock - changed it from {} to for example export default () => {} and at least I get a different error. Could it be that a different type of mock could be the answer?

sage iris
#

My mocks is module.exports = {};

#

maybe try that? 👀

#

otherwise ill take your repo for a spin locally

celest epoch
#

At least I get a different error, so its for sure something with the mock

sage iris
#

k let me hoist that code up

celest epoch
#

Oh okay

#

got it

#

So my guess was that I had to mimic the plugin signature

sage iris
#

i usually also alias all module imports like

firebase-admin/messaging
firebase-admin/app
celest epoch
#

since it's like

const plugin = (config) => (config2) => ({});

I tried this and it worked;

module.exports = () => () => ({});
sage iris
#

Oh you got it working?

celest epoch
#

Yup!

sage iris
#

Weird! but good its working now

#

cant wait for the webpack update to core

celest epoch
#

Really weird. The api was working just fine, webpack compiled without errors and it's just the admin panel that didn't want to run

sage iris
#

Yeah, it's purely for removing out server side code for the frontend bundle

celest epoch
#

haha, agreed! I feel like webpack belongs with the wordpress on my resume

sage iris
#

at best you'll get errors are modules try to use node.js packages like fs and at worst you're leaking server side secrets

sage iris
celest epoch
#

we'll see what the crafty people decide! but there's for sure better alternatives out there 🥲

#

Okay, back to actually building stuff! I owe you one for the awesome rubber ducking, @sage iris

sage iris
celest epoch
#

I spoke too soon, friend!
Something else is wonky.. Collections are in the config, but isn't handled properly now 😅

image.png
#

Api still works fine though

sage iris