__WEBPACK_IMPORTED_MODULE_7__.default

sawariz0r

3 months ago

48

• 

  paulpopus

  3 months ago

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

  
  

  
  

  https://github.com/payloadcms/plugin-stripe/blob/main/src/extendWebpackConfig.ts

  here is how this plugin does it

  
  

  
  

  Essentially the same in for your own config

  
  

  
  

  You have a mocks module similar to this

  https://github.com/payloadcms/plugin-stripe/blob/main/src/mocks/serverModule.js
• 

  sawariz0r

  3 months ago

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

• 

  paulpopus

  3 months ago

  Though your mocks can be just an empty object like

  
  

  {}

• 

  sawariz0r

  3 months ago

  Check! Got the mocks module as well

• 

  paulpopus

  3 months ago

  what does your payload config look like?

• 

  sawariz0r

  3 months ago

  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

• 

  paulpopus

  3 months ago

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

• 

  sawariz0r

  3 months ago

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

• 

  paulpopus

  3 months ago

  Are you aliasing all files importing firebase?

• 

  sawariz0r

  3 months ago

  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

• 

  paulpopus

  3 months ago

  theres no

  node_modules/.cache/webpack

  to clear right?

• 

  sawariz0r

  3 months ago

  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 🙂

• 

  paulpopus

  3 months ago

  Yeah that'd be really helpful!

• 

  sawariz0r

  3 months ago

  Haven't gotten to the point setting it up as a separate package, so I just dumped the files in question. Wasn't planning on showing it until I had a working prototype 🙂

  
  
  https://github.com/prpldevelopment/plugin-firebase
  

  
  

  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?

• 

  paulpopus

  3 months ago

  My mocks is

  module.exports = {};
  

  
  

  maybe try that? 👀

  
  

  
  

  otherwise ill take your repo for a spin locally

• 

  sawariz0r

  3 months ago

  
  

  
  

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

  
• 

  paulpopus

  3 months ago

  k let me hoist that code up

• 

  sawariz0r

  3 months ago

  Oh okay

  
  

  
  

  got it

  
  

  
  

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

• 

  paulpopus

  3 months ago

  i usually also alias all module imports like

  
  

  firebase-admin/messaging
  firebase-admin/app

• 

  sawariz0r

  3 months ago

  since it's like

  
  

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

  
  

  I tried this and it worked;

  
  

  module.exports = () => () => ({}); 

• 

  paulpopus

  3 months ago

  Oh you got it working?

• 

  sawariz0r

  3 months ago

  Yup!

• 

  paulpopus

  3 months ago

  Weird! but good its working now

  
  

  
  

  cant wait for the

  webpack

  update to core

• 

  sawariz0r

  3 months ago

  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

• 

  paulpopus

  3 months ago

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

• 

  sawariz0r

  3 months ago

  haha, agreed! I feel like

  webpack

  belongs with the

  wordpress

  on my resume

• 

  paulpopus

  3 months ago

  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

  
  

  
  

  at this point for sure

• 

  sawariz0r

  3 months ago

  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, @paulpopus

• 

  paulpopus

  3 months ago

  https://tenor.com/view/duck-cartoon-dancing-gif-21199553
• 

  sawariz0r

  3 months ago

  I spoke too soon, friend!

  
  

  Something else is wonky.. Collections are in the config, but isn't handled properly now 😅

  
  

  
  

  Api still works fine though

  
• 

  paulpopus

  3 months ago

  Does this happen with a fresh db?

• 

  sawariz0r

  3 months ago

  I managed to resolve the issue in

  https://discord.com/channels/967097582721572934/1119402480804036688

  . It looked like things were running and that webpack was happy, but it wasnt 😛