Browser fallbacks frequently needed?

jakey___last year

7

• 

  alessiogr

  last year

  oh nono don't go the fallback route, it's absolute pain.

  
  

  Check out this:

  https://payloadcms.com/docs/admin/webpack#aliasing-server-only-modules

  which should be exactly what you need

  
  

  
  

  Webpack is too dumb at noticing something is server-only, so you gotta tell it with aliasing to not include certain files in client-side code

  
  

  
  

  I'm doing it like this which is a bit nicer if you have to alias multiple files:

  
  
  

  const m = path.resolve(__dirname, 'mocks/emptyObject.js');
  
  function r(str) {
    return path.resolve(__dirname, str);
  }
  function generateAliases() {
    return {
      [r('endpoints/cleanContent/endpoint.ts')]: m,
      [r('endpoints/cleanContent/index.ts')]: m,
      [r('endpoints/completion/index.ts')]: m,
      [r('endpoints/serps/endpoint.ts')]: m,
      [r('endpoints/serps/index.ts')]: m,
      [r('endpoints/serps/types.ts')]: m,
      [r('endpoints/summarizeContent/endpoint.ts')]: m,
      [r('endpoints/summarizeContent/index.ts')]: m,
      [r('endpoints/tokenLength/endpoint.ts')]: m,
      [r('endpoints/tokenLength/index.ts')]: m,
      [r('endpoints/lexicalToMarkdown/index.ts')]: m,
      [r('jobs/index.ts')]: m,
      [r('jobs/serps/SerpCreator.ts')]: m,
      [r('jobs/serps/SiteCreator.ts')]: m,
      [r('jobs/serps/Status.ts')]: m,
      [r('jobs/embeddings/EmbeddingsJob.ts')]: m,
      [r('jobs/summaries/SummarizeJob.ts')]: m,
    };
  }
  
  export default buildConfig({
    admin: {
      webpack: (config) => {
        const newConfig = {
          ...config,
          resolve: {
            ...(config.resolve || {}),
            alias: {
              ...(config.resolve.alias || {}),
              react: path.resolve(__dirname, '../node_modules/react'),
              ...generateAliases(),
            },
          },
        };
        return newConfig;
      },
    },

  
  

  
  

  even for custom endpoints, webpack needs to be told to alias those like a baby

  
  

  
  

  Sadly no way to have an "endpoints" / "server" folder and just alias everything in that folder automatically, as to make it all server-side and not worry about it.

• 

  jakey___last year

  oh! didn't expect a response so quickly, lol. Thank you, I'll review this closely 🙇‍♂️

  
  

  
  

  @alessiogr thanks for providing this feedback. It's good to know that we have to work around webpack's short-comings in this case.

  
  
  

  in my case I just went with this type of solution

  alias: {
      ...config.resolve.alias,
      ...[ 'constants', 'stream', 'url', 'util', 'os', 'timers', 'dns', 'dgram', 'fs', 'child_process' ]
      .reduce((previousValue, currentValue) => {
          return {
              ...previousValue,
              [currentValue]: path.resolve(__dirname, "mocks/emptyObject.js")
          }
      }, {})
  }

  
  

  seems to properly not run on the client and only on the server now.