Collections loaded server + clientside

zaunermax2 years ago

1 1

• Selected Answer
  

  jmikrut

  2 years ago

  Hey @zaunermax!

  Great question. We have run into this exact issue in the past. The good news is that there is a super easy solution!

  You need to manually prevent Webpack from including your server-only code.

  In keeping to Payload's goal of sticking as close to JavaScript as possible, we just expose the Webpack config to you where you can utilize the variety of ways that Webpack allows you to do this.

  As Hooks are only executed server-side, we've commonly used Webpack's alias feature to swap out our Hooks with empty modules. Here is an example of a config that does exactly this:

  import path from 'path';
  import { buildConfig } from 'payload/config';
  import Customers from './collections/Customers';
  import Licenses from './collections/Licenses';
  
  const mockModulePath = path.resolve(__dirname, './mocks/emptyModule.js');
  
  export default buildConfig({
    admin: {
      webpack: (config) => ({
        ...config,
        resolve: {
          ...config.resolve,
          alias: [
            'fs',
            path.resolve(__dirname, './collections/Customers/generateForgotPasswordEmail'),
            path.resolve(__dirname, './collections/Customers/generateVerificationEmail'),
            path.resolve(__dirname, './collections/Customers/stripe/syncCustomer'),
            path.resolve(__dirname, './collections/Customers/stripe/updateCustomer'),
            path.resolve(__dirname, './collections/Licenses/stripe/createSubscription'),
            path.resolve(__dirname, './collections/Licenses/stripe/changePlan'),
          ].reduce((alias, path) => ({
            ...alias,
            [path]: mockModulePath,
          }), config.resolve.alias)
        }
      })
    },
    collections: [
      Customers,
      Licenses,
    ],
    serverURL: process.env.PAYLOAD_PUBLIC_SERVER_URL,
  });

  And then the ./mocks/emptyModule.js file just looks like this:

  module.exports = {};

  Take a look at the Webpack documentation for more info:

  https://payloadcms.com/docs/admin/webpack

  Does this help you out at all?

  3 replies
• 

  zaunermax2 years ago

  Thanks for the very elaborate answer, I'm going to try this right away 🙌

• 

  zaunermax2 years ago

  While this solution seems a bit hacky it works haha 😄 Thanks for your help! 🙌

• 

  DanRibbens

  2 years ago

  We considered other options such as having a whitelist or blacklist in the config, but this method ended up winning out. If you think of an alternate solution we'd like to hear it.